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

Ответ 1

: экв()

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

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

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

Выбирает все элементы, которые являются nth-child своего родителя.

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

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

Обозначение псевдо-класса nth-child (a + 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/

Ответ 2

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

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

Смотрите: http://api.jquery.com/eq-selector/ и http://api.jquery.com/nth-child-selector/

Удачи.

Ответ 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.

Ответ 4

eq() начинается с 0, а nth-child() начинается с 1

см. различия здесь http://jsfiddle.net/9xu2R/

Ответ 5

$("#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>

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

Ответ 6

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

Ответ 7

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

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

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

Демо здесь