Как определить индекс элемента в наборе (jQuery)


Определить индекс элемента в «наборе» позволяет метод jQuery index(). Метод index() можно использовать в нескольких вариациях. Давайте разберем примеры.

Допустим, у нас есть такой html-код:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head></head>
<body>
    <div>
        <span id = "cat">первый элемент</span>
        <span id = "dog">второй элемент</span>
        <h2>Какой-то заголовок</h2>
        <span id = "fish">третий элемент</span>
    </div>
</body>
</html>

Определяем индекс элемента cat:

1
alert($("#cat").index());

Эта строчка кода выведет — 0, т.к. нумерация начинается с 0. Теперь давайте определим индекс fish:

1
alert($("#fish").index());

Выведет 3, хотя мы ожидали 2, ведь мы неявно ожидали определить индекс среди элементов span. Такой результат корректный, т.к. метод index() без параметра определяет индекс среди соседних элементов (потомков) внутри родителя (в нашем случае это div). Тут к результату примешался элемент h2. Чтобы получить то, что мы хотим, давайте явно укажем среди каких элементов определять индекс:

1
alert($("#fish").index("span"));

Вот теперь получим 2.

Аналогичный результат даст и такая вариация:

1
alert($("span").index($("#fish")));




Другие посты

Категория: jQuery

Оставить комментарий