0

Есть несколько переменных в которых содержится html, как обработать эти переменные одной функцией, обратившись к ней однократно. не дублируя обращение для каждой переменной, хотел попробовать просто вот так, как в примере ниже: через через запятую.

В голове крутится способ, просто составить массив, из переменных и перебрать его. Но может быть есть готовое решение без написания функции перебора?

var first = $('<div><h1 class="rtecenter">это заголовок</h1><table border="0" cellpadding="1" cellspacing="1" style="width:100%" class=" cke_show_border"><tbody><tr><td style="width:55%"><br></td><td>Для организации "Рога и Копыта"<br>это название сайта&nbsp;<strong>мавмвамиваи.рф</strong></td></tr><tr><td style="width:55%"><br></td><td><span style="color:#FFFFFF">.</span></td></tr></tbody></table></div>');
var second = $('<div><h2>текст текст еткст</h2><ol><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies.</li><li>Quisque non tellus orci ac auctor augue.</li><li>Pellentesque eu tincidunt tortor aliquam. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor.</li><li>Sed enim ut sem viverra aliquet eget sit amet. </li></ol><p>Orci dapibus ultrices in iaculis. Congue nisi vitae suscipit tellus mauris a. Ut sem viverra aliquet eget sit amet. Fringilla urna porttitor rhoncus dolor purus. Dui accumsan sit amet nulla facilisi. In nisl nisi scelerisque eu ultrices vitae auctor. </p><p>Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p><p><br></p><table border="0" cellpadding="1" cellspacing="1" style="width:100%" class=" cke_show_border"><tbody><tr><td style="width:50%"><br></td><td><p><span style="font-size:10px">Magna etiam tempor orci eu lobortis elementum nibh. Sagittis purus sit amet volutpat. Nunc mattis enim ut tellus elementum sagittis vitae et. Magna fermentum iaculis eu non diam phasellus vestibulum.</span></p></td></tr></tbody></table></div>');

first, second.children('div').css('font-size', 10).find('h1').css({
  'font-size': 15,
  'font-weight': 'normal',
});
first, second.find('.rtecenter').css('text-align', 'center');
first, second.find('table').each(function(i, table) {
  $(table, 0).find('td').css('padding-bottom', 15);
  if (i > 0) $(table).css({
    marginBottom: 40
  }).find('tr:odd').css('background-color', '#eee');
})
$('textarea.first').val(first.html());
$('textarea.second').val(second.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<textarea class="first"></textarea>
<textarea class="second"></textarea>

Но что то и массив составить обработать не получилось..

Написал вот так:

[first, second].forEach(function(el){
    el.children('div').css('font-size', 10);
    el.find('h2').css('font-size', 10);
    el.find('.rtecenter').css('text-align','center');
})

выдает ошибку

а даже если бы и обработал, мне надо вставить обработанные элементы в соответствующие textarea.

5
  • first, second.children интересный синтаксис, заявочка на пропазал) На самом деле, идея с массивом самая адекватная
    – ThisMan
    24 мая 2019 в 10:23
  • если с массивом, вам подойдет map, которая вызовет функцию для всех элементов и вернет новый массив
    – ThisMan
    24 мая 2019 в 10:24
  • @ThisMan, да!) я так половину методов для себя открыл)
    – engenes
    24 мая 2019 в 10:27
  • learn.javascript.ru - основы JS... удобно разложены по пунктам. Знание поможет сэкономить кучу времени на поиски по темной комнате. 24 мая 2019 в 10:39
  • дополнил вопрос
    – engenes
    24 мая 2019 в 10:42

1 ответ 1

0

Вполне работают подобные безумные вещи.

var first = $('<div>' + $('textarea.first').val() + '</div>');
var second = $('<div>' + $('textarea.second').val() + '</div>');

$('#toggle_first').on('click', function(event) {
  [first, second].forEach(function(node) {
    node.find('h1')
      .css({
        'font-size': 18,
        'font-weight': 'normal',
      });
    node.find('h2').css('font-size', 14);
    node.find('.rtecenter').css('text-align', 'center');
    node.children('p').css('font-size', 12);
  });

  $('textarea.first').val(first.html());
  $('textarea.second').val(second.html());
});

$('#toggle_second').on('click', function(event) {
  $([first, second]).each(function(i, node) {
    node.find('h1')
      .css({
        'font-size': 12,
        'font-weight': 'bold',
      });
    node.find('h2').css('font-size', 24);
    node.find('.rtecenter').css('text-align', 'center');
    node.children('p').css('font-size', 18);
  });

  $('textarea.first').val(first.html());
  $('textarea.second').val(second.html());
});
.first,
.second {
  width: 480px;
  max-width: 100%;
}
<textarea class="first" rows="8"><h1 class="rtecenter">это заголовок</h1><p>забзац</p></textarea><br>
<textarea class="second" rows="8"><h2>это заголовок</h2><p>забзац</p></textarea>
<hr>
<button type="button" id="toggle_first">[first, second].forEach</button>
<button type="button" id="toggle_second">$([first, second]).each</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.