Jquery индекс элемента в наборе

Материал из JQuery

Примеры

Рассмотрим следующий html-текст:

следующие два абзаца кода будут делать одно и то же:

в результате, на экран будет два раза выведено: "Index: 1". Это же, будет выведено на экран и в следующем случае:

таким образом видно, что второй и третий вариант использования метода index() отличаются порядком следования элемента поиска и области поиска.

В данном случае, jQuery будет искать элемент с идентификатором bar, среди соседних элементов, которыми в нашем случае являются элементы li.

May 20, 2015

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

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

Метод index

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

Синтаксис метода также простой:

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

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

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

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

Метод eq

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

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

Читайте также:  Продажа электромобилей в европе

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

Методы eq и index

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

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

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

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

  • сделать выборку всех элементов с классом
  • при клике мыши на любом из этих элементов выполнить функцию:
  • сделать выборку всех элементов
  • вернуть индекс активного элемента из выборки —
  • вернуть активный элемент по его индексу —
  • для возвращенного элемента изменить его содержимое на значение его индекса —
  • всем соседним (sibling) элементам установить значение в —

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

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

  • Like
  • Tweet
  • +1

RxJs — pluck

Задача заметки — понять, что такое метод _pluck_.Допустим, у нас есть _input_, на который мы подписаны и у которого забираем вводимое зна. … Continue reading

Содержание:

.index() Возвращает: Integer

Описание: Возвращает индекс заданного элемента в наборе (2 и 3 вариант использования) или относительно соседних элементов (1 вариант использования).

Добавлен в версии: 1.4 .index()

Добавлен в версии: 1.4 .index( selector )

Добавлен в версии: 1.0 .index( element )

Return Values

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

Читайте также:  Загрузочная флешка хакинтош из под windows

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

Detail

The complementary operation to .get() , which accepts an index and returns a DOM node, .index() can take a DOM node and returns an index. Suppose we have a simple unordered list on the page:

If we retrieve one of the three list items (for example, through a DOM function or as the context to an event handler), .index() can search for this list item within the set of matched elements:

We get back the zero-based position of the list item:

Similarly, if we retrieve a jQuery object consisting of one of the three list items, .index() will search for that list item:

We get back the zero-based position of the list item:

Note that if the jQuery collection used as the .index() method’s argument contains more than one element, the first element within the matched set of elements will be used.

We get back the zero-based position of the first list item within the matched set:

If we use a string as the .index() method’s argument, it is interpreted as a jQuery selector string. The first element among the object’s matched elements which also matches this selector is located.

We get back the zero-based position of the list item:

If we omit the argument, .index() will return the position of the first element within the set of matched elements in relation to its siblings:

Читайте также:  Как делается блок схема

Again, we get back the zero-based position of the list item: