Метод eq и index библиотеки jQuery

Достаточно интересные методы -

.eq()

1
.index()

, особенно в сочетании друг с другом. Поэтому и решил объединить рассмотрение этих методов. Каждый по отдельности - методы просты и мало показательны.

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

Метод index

Работа метода

.index()

проста - он возвращает индекс (порядковый номер) указанного элемента среди группы ему подобных.

Синтаксис метода

.index()

также простой:

index([element])

или

.index(selector)

И пример для иллюстрации:

<ul class="test">
  <li class="primo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="secondo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="tetro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="quattro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="cinque">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="sei">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="sedici">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="ten">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>

Сделать выборку всех элементов

li

и вернуть индекс элемента

1
li

с классом

1
.cinque

var listIndex = $('.cinque');
console.log('Index of ' + $('li').index(listIndex));

Найти элемент с классом

.sei

среди соседних элементов и вернуть его индекс:

console.log('Index of ' + $('.sei').index());

Как видим, способы получения индекса элемента разные, а результат один.

Метод eq

Метод

.eq()

прямопротивоположен методу

1
.index()

. Этот метод возвращает элемент (как объект) по его индексу (порядковому номеру).

Если взять предыдущую HTML-разметку, то такой javascript-код:

$('li').eq(1).html("Secondo");

… изменит содержимое второго по счету элемента

li

на “Secondo”. Почему второго? Как можно догадаться, результатом выборки

1
$('li')

является массив элементов; а в массиве индексирование элементов начинается с нуля (0).

Методы eq и index

Рассмотренные выше примеры использования методов

.eq()

1
.index()

просты и понятны. И неинтересны.

Гораздо более интеерсным примером является случай объединения обоих методов в jQuery-цепочке.

Приведу такой гипотетический пример:

<ul class="test">
  <li class="test__item primo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item secondo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item tetro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item quattro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item cinque">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item sei">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item sedici">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>

$('.test__item').click(function(){
  $('li').eq($(this).index()).html($(this).index()).siblings().html("test item link");
});

Javascript-код, написанный выше, читается таким образом:

сделать выборку всех элементов с классом 1 .test__item
при клике мыши на любом из этих элементов выполнить функцию:
- сделать выборку всех элементов 1 li
- вернуть индекс активного элемента из выборки - 1 $(this).index()
- вернуть активный элемент по его индексу - 1 .eq($(this).index())
- для возвращенного элемента 1 .eq($(this).index()) изменить его содержимое на значение его индекса - 1 html($(this).index())
- всем соседним (sibling) элементам установить значение в - 1 .siblings().html("test item link")

Пример рабочий, поэтому его можно свободно попробовать.

В принципе, на этом все.

Метод eq и index библиотеки jQuery

May 20, 2015

Метод index

Метод eq

Методы eq и index

Mangling Angular

Constructor parameter without access modifier

RxJs and DestroyRef Provider