Использование jQuery Функции .index()

.index() - это метод на объектах jQuery, он обычно используется, чтобы найти данный элемент внутри объекта jQuery, на котором он вызывается.

У метода .index() есть четыре различных сигнатуры с различной семантикой, что может сбить с толку. Эта статья описывает подробности для того, чтобы понять способ работы jQuery функции .index() с каждой сигнатурой.

.index() без Параметров

<ul> <div></div> <li id="foo1">foo</li> <li id="bar1">bar</li> <li id="baz1">baz</li> <div></div> </ul>
var $foo = $( "#foo1" ); console.log( "Индекс: " + $foo.index() ); // 1 var $listItem = $( "li" ); // Это неявно вызывает .first() console.log( "Индекс: " + $listItem.index() ); // 1 console.log( "Индекс: " + $listItem.first().index() );//1 var $div = $( "div" ); // Это неявно вызывает .first() console.log( "Индекс: " + $div.index() ); // 0 console.log( "Индекс " + $div.first().index() ); // 0

В первом примере, .index() дает начинающийся с нуля индекс #foo1 внутри его родителя. Поскольку #foo1 является вторым дочерним элементом его родителя, index() возвратит 1.

Когда .index() вызывается на объекте jQuery, который содержит больше чем один элемент, он вычисляет индекс первого элемента.

.index() со Строковым Параметром

<ul> <div class="test"></div> <li id="foo1">foo</li> <li id="bar1" class="test">bar</li> <li id="baz1">baz</li> <div class="test"></div> </ul> <div id="last"></div>
var $foo = $( "li" ); // Это неявно вызывает .first() console.log( "Индекс: " + $foo.index( "li" ) ); // 0 console.log( "Индекс: " + $foo.first().index( "li" ));//0 var $baz = $( "#baz1" ); console.log( "Индекс: " + $baz.index( "li" )); // 2 var $listItem = $( "#bar1" ); console.log( "Индекс: " + $listItem.index( ".test" ));//1 var $div = $( "#last" ); console.log( "Индекс: " + $div.index( "div" ) ); // 2

Когда .index() вызывается со строковым параметром, есть два момента для рассмотрения. Во-первых, jQuery неявно вызовет .first() на исходном объекте jQuery. Это найдет индекс первого элемента, а не последнего элемента в этом случае. Это является нелогичным, так что надо быть внимательным.

Второй вопрос для рассмотрения - то, что jQuery запрашивает всю DOM, используя переданный в строке селектор и проверяя индекс внутри этого вновь запрошенного объекта jQuery. Например, при использовании .index( "div" ) в последнем примере выше, jQuery выбирает все элементы <div> в документе, затем ищет индекс, который содержит первый элемент в объекте jQuery, на котором вызывается .index().

.index() с Объектным Параметром jQuery

<ul> <div class="test"></div> <li id="foo1">foo</li> <li id="bar1" class="test">bar</li> <li id="baz1">baz</li> <div class="test"></div> </ul> <div id="last"></div>
var $foo = $( "li" ); var $baz = $( "#baz1" ); console.log( "Индекс: " + $foo.index( $baz ) ); // 2 var $tests = $( ".test" ); var $bar = $( "#bar1" ); // Неявно вызывает .first() на аргументе. console.log( "Индекс: " + $tests.index( $bar ) ); // 1 console.log( "Индекс: " + $tests.index($bar.first()));//1

В этом случае, первый элемент объекта jQuery, который передается в .index(), проверяется по всем элементам в исходном объекте jQuery. Исходный объект jQuery, слева от .index(), подобен массиву и поиск идет с индекса 0 до length - 1 для первого элемента параметра jQuery объекта.

.index() с Параметром Элемента DOM

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

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)