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

Опубликовано admin - вт, 05/01/2018 - 23:40

[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"

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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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://test-drupal.ru/themes/slyweb/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

Руководство по jQuery!

Плагины jQuery UI

Эффекты