jQuery index(subject)

Slyweb

Поиск функций jQuery

Характеристика функции

[Function] index(subject)

Раздел "Miscellaneous"

Функция осущетсвляет поиск каждого выбранного элемента для объекта и возвращает его индекс, если элемент найден индекс начинается с 0. Если jQuery объект не содержит искомого элемента, то только первый элемент отмечается.

Параметры

index(subject)

1.0

subject: объект, который ищет функция.

index()

1.4

contained: поиск элемента среди набора элементов по его индексу.

index( selector )

1.4

selector: сеелктор представляющий коллекцию jQuery, в которой будет осуществляться поиск.

index( element )

1.4

element: элемент структуры DOM внутри объекта jQuery, в котором будет осуществляться поиск.

Описание

Возвращает - 1 если объект не был найден.

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

Если метод был вызван с передачей дополнительного параметра, определющего jQUery коллекцию, то будт возвращен индекс эелмента расположенного в данной jUQewry коллекции.

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

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Поиск индекса элемента в неупорядоченном списке:

Пример
Весь код

"jQuery"

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

"HTML"

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

"CSS"

  .div1{background: #cadceb;}
  .div2{background: #fef;}

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


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


</body>
</html>


<style>

  .div1{background: #cadceb;}
  .div2{background: #fef;}

</style>

Пример:

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

Пример
Весь код

"jQuery"

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

"HTML"

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

"CSS"

  .div1{background: #cadceb;}
  .div2{background: #fef;}

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


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


</body>
</html>


<style>

  .div1{background: #cadceb;}
  .div2{background: #fef;}

</style>

Пример:

Если jQUery коллекция используемая методом index() в качетсве параметра содержит более одного эелмента, то будет возвращен только индекс первого элемента в коллекции.

Пример
Весь код

"jQuery"

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

"HTML"

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

"CSS"

  .div1{background: #cadceb;}
  .div2{background: #fef;}

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


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


</body>
</html>


<style>

  .div1{background: #cadceb;}
  .div2{background: #fef;}

</style>

Пример:

Если мы применяем метод index() без аргументов, то будет возвращен индекс первого подходящего элемента, расположенного внутри набора элементов соотносящихся друг к другу как "брат и сестра".

Пример
Весь код

"jQuery"

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

"HTML"

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

"CSS"

  .div1{background: #cadceb;}
  .div2{background: #fef;}

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


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


</body>
</html>


<style>

  .div1{background: #cadceb;}
  .div2{background: #fef;}

</style>

Пример:

По щелчку, вернуть индекс (начинающийся с 0) элемента div на данной странице.

Пример
Весь код

"jQuery"

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

"HTML"

<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>

"CSS"

div { background:yellow; margin:5px; }
span { color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(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 class="iframe">


<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>


</body>
</html>


<style>

div { background:yellow; margin:5px; }
span { color:red; }

</style>

Пример:

Вернуть индекс элемента с идентификатором (id) foobar.

Пример
Весь код

"jQuery"

$("*").index( $('#foobar')[0] )

"HTML"

<div id="foobar"><b></b><span id="foo"></span></div>

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("*").index( $('#foobar')[0] )

  });
</script>

</head>
<body class="iframe">


<div id="foobar"><b></b><span id="foo"></span></div>


</body>
</html>

Пример:

Вернуть индекс элемента с id foo, который находится в другом элементе.

Пример
Весь код

"jQuery"

$("*").index( $('#foo') )

"HTML"

<div id="foobar"><b></b><span id="foo"></span></div>

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("*").index( $('#foo') )

  });
</script>

</head>
<body class="iframe">


<div id="foobar"><b></b><span id="foo"></span></div>


</body>
</html>

Пример:

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

"jQuery"

var mainNavLinks = $('ul#mainNav li a');
mainNavLinks.click(function(){alert(mainNavLinks.index(this));});

Пример:

Возвращает - 1, так как здесь нет элементов с ID bar.

Пример
Весь код

"jQuery"

$("*").index( $('#bar')[0] )

"HTML"

<div id="foobar"><b></b><span id="foo"></span></div>

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("*").index( $('#bar')[0] )

  });
</script>

</head>
<body class="iframe">


<div id="foobar"><b></b><span id="foo"></span></div>


</body>
</html>

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/index/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: