jQuery разница между: eq () и: nth-child ()

Question

В jQuery, каковы некоторые ключевые различия между использованием: eq () и: nth-child () для выбора каких-либо элементов?

Также в целом для начального индекса, в этом случаеоно начинается с «0», а когда начинается с «1»?

Answer 1

: экв ()

Выберите элемент с индексом n в соответствующем наборе.

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

: п-й ребенок ()

Выбирает все элементы, которые являются n-ными дочерними элементами их родителей.

Поскольку реализация jQuery: nth-child (n) строго получена из спецификации CSS, значение n равно «1-indexed», что означает, что отсчет начинается с 1. Однако для всех других выражений селектора jQuery следует за счетом «0-index» в JavaScript. Поэтому, если сингл содержит два <li> с, $('li:nth-child(1)') выбирает первое <li>, а $('li:eq(1)') выбирает второе.

Псевдокласс: nth-child (n) легко спутать с: eq (n), даже если эти два могут привести к совершенно разным сопоставляемым элементам. С помощью: nth-child (n) подсчитываются все дочерние элементы независимо от того, кем они являются, и указанный элемент выбирается, только если он соответствует селектору, прикрепленному к псевдоклассу. С помощью: eq (n) учитывается только селектор, присоединенный к псевдоклассу, не ограничиваясь потомками любого другого элемента, и выбирается (n + 1) -й элемент (n на основе 0).

Обозначение псевдокласса: nth-child (an + b) представляет элемент, у которого в дереве документа есть братья и сестры + b-1 перед ним для любого положительного целого или нулевого значения n и который имеет родительский элемент , Для значений a и b, больших нуля, это эффективно делит дочерние элементы элемента на группы элементов (последняя группа принимает остаток) и выбирает b-й элемент каждой группы. Например, это позволяет селекторам обращаться к каждой строке в таблице и может использоваться для чередования цвета текста абзаца в цикле из четырех. Значения a и b должны быть целыми числами (положительными, отрицательными или нулевыми). Индекс первого дочернего элемента равен 1.

В дополнение к этому: nth-child () может вместо этого принимать аргументы "нечетный" и "четный". «Нечетный» имеет то же значение, что и 2n + 1, а «четный» имеет то же значение, что и 2n.

Дальнейшее обсуждение этого необычного использования можно найти в спецификации W3C CSS .

Подробное сравнение

См. Демонстрацию: http://jsfiddle.net/rathoreahsan/sXHtB/ - ссылка обновлена ​​

См. Также ссылки

http://api.jquery.com/eq-selector/

http://api.jquery.com/nth-child-selector/

Answer 2

:nth-child() Селектор: выбирает все элементы, которые являются nth- дочерними их родительских элементов.

:eq() Селектор: выберите элемент с индексом n в наборе .

См .: http://api.jquery.com/eq-selector/ и http://api.jquery.com/nth-child-selector/

Удачи.

Answer 3

:eq() позволяет получить доступ к элементам в объекте jQuery по индексу

http://api.jquery.com/eq-selector/

:nth-child также позволяет получить доступ к элементу по индексу, однако он применяется только к термину, расположенному непосредственно слева от него.

http://api.jquery.com/nth-child-selector/

Это означает, что если вы хотите выбрать один элемент из селектора, используйте: eq, если вы хотите ограничить выбор элементами с n-1 предшествующими сибилингами, тогда используйте nth-child.

Массивы Javascript обычно индексируются с 0; однако nth-child индексируется из 1, поскольку технически это свойство CSS, а не свойство jQuery.

Answer 4

CSS: first-child,: nth-child и: last-child не похожи на: eq

Так что, если бы у нас был фрагмент HTML типа

<div>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

, тогдаселектор .foo: nth-child (2) будет соответствовать div # bar2.Если мы вставим еще один элемент в начало контейнера:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

И снова мы выберем .foo: nth-child (2), мы сопоставим div # bar1, потому что второй дочерний элемент контейнера также совпадает.foo.

Таким образом, во втором примере, если мы попробуем .foo: nth-child (1) или эквивалентный .foo: first-child, мы не будем сопоставлять никакие элементы, поскольку первый дочерний элемент вэтот контейнер - тег p - не соответствует .foo.

Аналогично: nth-child может соответствовать дочерним элементам в нескольких контейнерах.В фрагменте HTML:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

<div>
     <div id="quux" class="foo"></div>
</div>

селектор .foo: last-child будет соответствовать divs # bar3 и #quux;но .foo: first-child или .foo: nth-child (1) будут соответствовать только #quux, поскольку первый дочерний элемент первого контейнера, опять же, не .foo.

Source https://content.pivotal.io/blog/css-first-child-nth-child-and-last-child-are-not-like-eq

Answer 5

nth-child выбирает n-й дочерний элемент родительского объекта (-ов), а другой выбирает n-й элемент в коллекции (индекс, начинающийся с 0 или 1, является лишь тривиальной частью разницы). так сказать, tr td: nth-child (5) выбирает каждого tr и получает их 5-ых потомков, тогда как eq получает все tds во всех trs и выбирает только 5-й td ... Основное отличие состоит в том, что Действительно, формулировка документации не указывает на этот факт прямо, но искажает слова, как будто это черная магия ...

Answer 6

$("#dataTable tr:nth-child(1) td:nth-child(2)").html();

здесь dataTable - это таблица

<table id="dataTable" width="50%">
    <thead>
        <th>Name</th>
        <th>EnrollNo.</th>
    </thead>
    <tbody>
        <tr>
           <td>Somdip</td><td>IT001<td>
        </tr>
        <tr>
           <td>Sanyal</td><td>IT002<td>
        </tr>
    </tbody>
</table>

Селектор jquery nth-child поможет вам получить точные значения ячеек из этой таблицы.Практический пример, где tr:nth-child(1) td:nth-child(2) выбирает 1,2 ячейку таблицы.

Answer 7

eq () начинается с 0, в то время как nth-child () начинается с 1

Здесь ясно видны различия http://jsfiddle.net/9xu2R/

Answer 8

:eq основан на индексированном массиве, поэтому он начинается с 0. Он также не является частью спецификации Css.

Принимая во внимание, что :nth-child является частью спецификации Css и относится к позиции элемента в дереве DOM.

С точки зрения использования, они оба делают одно и то же.

Демо здесь