eq()

eq( индекс )

Возвращает: jQuery

Описание: Сокращает число совпавших элементов до одного по указанному индексу.

.eq( индекс )

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

index

Целое число

Целое число, указывающее позицию элемента.

.eq( -индекс )

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

-index

Целое число

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

Данный объект jQuery, который представляет набор элементов DOM, метод .eq() создает новый объект jQuery из одоного из соответствующих элементов. Поставляемый индекс определяет позицию данного элемента в наборе элементов.

Рассмотрим страницу с простым списоком:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>

    <li>list item 4</li>
    <li>list item 5</li>
</ul>

Мы можем применить этот метод к набору элементов списка:

  $('li').eq(2).css('background-color', 'red');

Результатом этого вызова является красный фон для третьего элемента. Обратите внимание, что поставляемый индекс начинается с нуля, и ссылается на положение элемента в объекте jQuery, а не в дереве DOM.

list item 1
list item 2
list item 3
list item 4
list item 5

Если переданно отрицательное число, оно указывает на место, начиная с конца набора, а не с начала. Например:

  $('li').eq(-2).css('background-color', 'red');

На этот раз элемент списка 4 станет красным, так как он второй с конца набора.

list item 1
list item 2
list item 3
list item 4
list item 5

Примеры

Пример 1

Заливка синим цветом элемента div с индексом 2 путем добавления соответствующего класса.

    $("div").eq(2).addClass("blue");

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

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

Полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
 
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("div").eq(2).addClass("blue");

  });
  </script>

  <style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
  </style>
</head>

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

  <div></div>
  <div></div>

  <div></div>
  <div></div>

</body>
</html>