:eq()

Выборка элемента по n-ному индексу.

  • version added: 1.0jQuery( ":eq(index)" )

    index: индекс элемента, начиная с 0.

  • version added: 1.8jQuery( ":eq(-index)" )

    -index: индекс элемента, начиная с 0, начиная с конца.

Селекторы, базирующиеся на индексе элементов (:eq(), :lt(), :gt(), :even, :odd) фильтруют пачки элементов в поиске нужного совпадения. К примеру, если элемент выбирается с помощью селектора класса (.myclass) и потом необходимо выбрать какой-то элемент из четырёх, то стоит указать индекс от 0 до 3.

Поскольку индексация в массивах JavaScript начинается с 0, то и в селекторе используется этот же подход. Вот почему $('.myclass:eq(1)') выбирает второе вхождение элемента с классом myclass, а не первое. Однако, используя селектор :nth-child(n) индексация начинается с 1.

Начиная с jQuery 1.8, селектор :eq(index) может принимать отрицательные значения, что означает что поиск будет осуществляться с конца.

Примеры

Пример: найти третий элемент td.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>

</body>
</html>

Демо:

Пример: применить различные стили для того чтобы продемонстрировать возможность прокрутки элементов в цикле .each().

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>

<script>
/* жёлтый фон для одного <li> */
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );

/* курсив для текста второго <li> в каждом <ul class="nav"> */
$("ul.nav").each(function(index) {
  $(this).find("li:eq(1)").css( "fontStyle", "italic" );
});

/* красный текст все потомкам <ul class="nav"> */
/* для каждого <li>, который является вторым потомком своего родителя */
$("ul.nav li:nth-child(2)").css( "color", "red" );
</script>

</body>
</html>

Демо:

Пример: добавить класс List 2, второму li с конца.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <style>
.foo {
  color: blue;
  background-color: yellow;
}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>

<script>
$( "li:eq(-2)" ).addClass( "foo" )
    </script>

</body>
</html>

Демо:

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Февраля 2014 14:23
    Slava_Vyacheslav
    А что означает +i+ после eq? Например:
    li:eq("+i+") а
    
    p.s цикла в коде нет.
    • 23 Июня 2014 16:42
      corvus007
      Мы переменную объединяем со строкой http://learn.javascript.ru/types-conversion#строковое-преобразование
^ Наверх ^