Цепочка методов в jQuery

В этой статье рассмотрим интересную возможность jQuery, которая позволяет вызывать методы последовательно друг за другом или, другими словами, объединять их в цепочку.

Создание цепочки методов

Цепочка методов – это механизм jQuery, который позволяет вызывать методы последовательно один за другим.

Это возможно благодаря тому, что большинство методов в результате своего выполнения возвращают объект jQuery, который в дальнейшем можно использовать для вызовов других методов.

Например, получим набор элементов <h1>, а затем выполним над ним несколько действий в одной строке кода:

$('h1').text('Новый текст h1').css('color', 'green');

В этом примере показано последовательное выполнение 2 методов:

text() – для изменения содержимого;
css() – для установки стилей.

Если перейти в консоль и выполнить $('h1').text('Новый текст h1'), то можно наглядно увидеть, что он возвращает исходный набор, т.е. тоже самое, что $('h1').

При необходимости одну строку кода можно разбить на несколько строк для удобства его чтения. Например, записать так:

$('h1')
  .text('Новый текст h1')
  .css('color', 'green');

Кстати, необходимо обратить внимание на то, что не все методы jQuery возвращают объект jQuery.

Например, text() без аргументов:

var text = $('h1').text();

Когда методу text() мы не передаём аргументы, он вместо объекта jQuery возвращает нам текстовое содержимое элемента. Поэтому в этом случае мы не сможем продолжить дальше вызывать методы jQuery:

// так работать не будет
$('h1').text().css('color', 'green');

Возврат к предыдущему набору элементов

В jQuery при вызове методов, создающих новый набор элементов, предусмотрено сохранение предыдущего набора элементов в специальном свойстве prevObject.

Вернуться к предыдущему набору можно с помощью метода end().

Рассмотрим работу с end() на следующем примере:

<div id="box-1">
  <div id="box-2">
    <div id="box-3"></div>
  </div>
</div>
<div id="box-4"></div>

<script>
function styles(size, backgroundColor) {
  return {
    position: 'absolute',
    width: size,
    height: size,
    backgroundColor: backgroundColor
  }
}

$('#box-1')
  .css(styles('400px', '#b71c1c'))
  .children('#box-2')
    .css(styles('300px', '#d32f2f'))
    .children('#box-3')
      .css(styles('200px', '#f44336'))
    .end()
  .end()
  .next('#box-4').appendTo('#box-3')
    .css(styles('100px', '#e57373'));
</script>

В этом примере первый набор элементов создаётся с помощью $('#box-1'). После этого для элементов этого набора устанавливаются стили посредством css(). Метод css() не создаёт новый набор, он возвращает текущий (первый).

Следующий метод в цепочке – это children(). Он ищет среди дочерних элементов текущего (первого) набора элемент по селектору «#box-2». В результате своего выполнения он создаёт новый (второй) набор и добавляет в специальное свойство prevObject ссылку на первый. Далее css() устанавливает стили для текущего (второго) набора и возвращает его в качестве результата.

Следующий метод – это снова children(). Здесь он уже выполняет поиск дочерних элементов по селектору «#box-3» для элементов текущего (второго) набора. В качестве результата он возвращает новый (третий) набор, и помещает в специальное свойство ссылку на второй. А во втором как мы уже отметили выше имеется ссылка на первый. После этого css() устанавливает стили для элементов текущего (третьего) набора и возвращает его в качестве результата.

Далее начинается самое интересное, с помощью первого end() возвращаемся с текущего (третьего) набора на предыдущий (второй). Посредством второго end() с текущего (второго) набора на предыдущий (первый).

Следующий метод в цепочке – next(). Посредством него найдём элементы по селектору «#box-4» расположенные после элементов текущего (первого) набора и находящихся с ними на одном уровне вложенности (т.е. являющимися друг по отношению к другу сиблингами). В качестве результата next() создаёт из найденных элементов новый (четвёртый) набор и добавляет в него ссылку на первый.

Заканчивается цепочка методом css(), который устанавливает указанные стили для каждого элемента текущего (четвёртого) набора и возвращает этот набор в качестве результата.

Если дальше поиграться и поместить возвращаемый результат этой конструкции в переменную и вывести её значение в консоль, то получим четвёртый набор, имеющий ссылку в специальном свойстве на первый. Если вызвать после этого end(), то вернёмся на предыдущий (первый) набор.

Ещё один пример с использованием end():

<ul id="list">
  <li>One<li>
  <li>Two</li>
  <li class="active">Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
$('#list>li')
 .filter(':odd')
   .css('background-color', '#eee')
   .end()
 .filter('.active')
   .css('background-color', '#fffde7');
</script>

В этом сценарии мы начинаем с того, что создаём первый набор, состоящий из <li> расположенных непосредственно в id="list". Далее посредством filter() мы уменьшаем первый набор, т.е. создаём новый (второй), состоящий из элементов с нечётным индексом. После этого устанавливаем им значение CSS-свойства background-color.

Теперь чтобы нам перейти к первому набору используем метод end(). Затем формируем новый (третий) набор из элементов имеющим класс active. Найденным элементам устанавливаем цвет фона «#fffde7».

endBack()

В jQuery имеется метод endBack(). Он позволяет добавить предыдущий набор элементов (при необходимо отфильтрованный с помощью селектора) к текущему.

Пример использования метода endBack():

<ul id="list">
  <li>One<li>
  <li>Two</li>
  <li class="active">Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
$('#list>li.active')
 .nextAll('li')
 .addBack()
   .css('background-color', '#eee')
</script>

В этом примере сначала создаётся набор из <li> с классом active, расположенных непосредственно в #list. После этого вызывается метод nextAll(), который возвращает новый (второй) набор <li>, расположенных после элемента из первого набора. Затем вызов метода addBack() создаёт новый (третий) набор, состоящий из элементов второго и предыдущего (первого) набора. Завершается цепочка css(), который устанавливает стили элементам текущего (третьего) набора и возвращает его в качестве результата.

Создание цепочки методов

Возврат к предыдущему набору элементов

endBack()

Комментарии: