index()

Категории: Ядро > Доступ к объектам jQuery

index()

Возвращает: Число

Описание: Производит поиск среди выбранных элементов.

Аргументы

.index()

Добавлена в версию: 1.4

.index(селектор)

Селектор

Добавлена в версию: 1.4

Селектор, представляющий коллекцию jQuery в которой производится поиск элемента.

.index(элемент)

Элемент

Добавлена в версию: 1.0

Элемент DOM или первый элемент внутри объекта jQuery, на который производится поиск.

Возвращаемые значения

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

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

Если строка селектора переданна как аргумент, .index() вернет целое число показывающее позицию оригинального элемента относительно элементов обозначенных в селекторе. Если элемент не найден, .index() вернет -1.

Детали

В дополнение к .get(), который принимает индекс и возвращает узел, .index() может получить узел DOM и вернуть индекс. Предположим, что мы имеем простой ненумерованный список на странице:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

Если мы ищем один из трех элементов (например, с помощью функции DOM или как контекст обработчика событий), .index() может искать этот элемент внутри набора соответствующих элементов:

var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));
Мы получим позицию элемента, начиная с нуля:

Результат выполнения кода выше:

Index: 1

Аналогично, если мы ищем объект jQuery, включающий один из трех элементов, .index() будет искать этот элемент:

var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));

Результат выполнения кода выше:

Index: 1

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

var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));

Результат выполнения кода выше:

Index: 1

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

var listItem = $('#bar');
alert('Index: ' + listItem.index('li'));

Результат выполнения кода выше:

Index: 1

Если мы опустим аргумент, .index() вернет позицию первого элемента внутри набора соответствующих элементов относительно его родственных элементов:

alert('Index: ' + $('#bar').index();

Результат выполнения кода выше:

Index: 1

Примеры

Пример 1

По нажатию ЛКМ возвращает индекс соответствующего элемента div на странице.

$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

  <style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>

   <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});
});

</script>

</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>

<div>Third div</div>
</body>
</html>

Попробуйте сами

Пример 2

Возвращает индекс элемента с ID «bar».

    var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );
});

</script>
</head>

<body>
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

Попробуйте сами

Пример 3

Возвращает индекс первого элемента в наборе элементов jQuery.

var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );

Результат выполнения кода выше:

Попробуйте сами

Пример 3 - Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );
});

</script>
</head>
<body>

<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>

  <li id="baz">baz</li>

</ul>
<div></div>
</body>

</html>

Попробуйте сами

Пример 4

Возвращает индекс элемента с id «bar» относительно всех элементов 'li'.

$('div').html('Index: ' +  $('#bar').index('li') );

Результат выполнения кода выше:

Попробуйте сами

Пример 4 - Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
$('div').html('Index: ' +  $('#bar').index('li') );
});

</script>
</head>
<body>

<ul>

  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

<div></div>
</body>
</html>

Попробуйте сами

Пример 5

Возвращает индекс элемента «bar» относительно его родственных элементов.

var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );

Результат выполнения кода выше:

Попробуйте сами

Пример 5 - Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

Попробуйте сами

Пример 6

Возвращает -1, так как нет элемента с id «foobar».

var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);

Результат выполнения кода выше:

Попробуйте сами

Пример 6 - Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>

</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

index()

index()

Аргументы

Возвращаемые значения

Детали

Примеры

Пример 1

Пример 2

Пример 3

Пример 4

Пример 5

Пример 6

Комментарии