:eq() 和 :nth-child() 之间的 jQuery 区别

Question

在 jQuery 中，使用 :eq() 和 :nth-child() 选择任何元素的主要区别是什么？

同样，对于起始索引，在什么情况下是从“0”开始，什么时候从“1”开始？

Answer 1

:eq()

在匹配集中选择索引 n 处的元素。

与索引相关的选择器（:eq()、:lt()、:gt()、:even、:odd）过滤与前面的表达式匹配的元素集。他们根据该匹配集合中元素的顺序缩小集合范围。例如，如果首先使用类选择器 (.myclass) 选择元素并返回四个元素，则为这些选择器的目的为这些元素指定索引 0 到 3。

:nth-child()

选择作为其父级的第 n 个子级的所有元素。

因为 jQuery 对 :nth-child(n) 的实现是严格从 CSS 规范派生的，所以 n 的值是“1-indexed”，这意味着计数从 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(an+b) 伪类表示法表示一个元素，在文档树中它之前有一个+b-1 个兄弟元素，对于 n 的任何正整数或零值，并且有一个父元素.对于大于零的 a 和 b 的值，这有效地将元素的子元素分成 a 元素的组（最后一组取余数），并选择每个组的第 b 个元素。例如，这允许选择器对表格中的每隔一行进行寻址，并且可以用于以四次循环交替段落文本的颜色。 a 和 b 值必须是整数（正数、负数或零）。元素的第一个子元素的索引为 1。

除此之外， :nth-child() 可以将“奇数”和“偶数”作为参数。 “奇数”与 2n+1 具有相同的含义，而“偶数”与 2n 具有相同的含义。

可以在W3C CSS specification 中找到有关这种不寻常用法的进一步讨论。

详细比较

查看演示：http://jsfiddle.net/rathoreahsan/sXHtB/ -- 链接已更新

另见参考文献

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

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

Answer 2

:nth-child() 选择器：选择所有其父元素的第 n-子元素。

: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

eq() 以 0 开头，而 nth-child() 以 1 开头

在这里清楚地看到差异 http://jsfiddle.net/9xu2R/

Answer 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>

jquery 的nth-child 选择器将帮助您从该表中获取准确的单元格值。 tr:nth-child(1) td:nth-child(2) 获取表格的 1,2 单元格的实际示例。

Answer 6

nth-child 选择父对象的第 n 个子对象 other 选择集合中的第 n 个元素（从 0 或 1 开始的索引只是差异的一小部分）。 所以说 tr td:nth-child(5) 选择每个 tr 并获得他们的第 5 个孩子，而 eq 获得所有 trs 中的所有 tds 并且只选择第 5 个 td ...主要区别在于。确实，文档的措辞并没有直接指出这一事实，而是像黑魔法一样乱码......

Answer 7

CSS :first-child、:nth-child 和 :last-child 不像 :eq

所以如果我们有一个类似 HTML 的 sn-p

<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 sn-p 中：

<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 将匹配 div #bar3 和 #quux；但是 .foo:first-child 或 .foo:nth-child(1) 只会匹配 #quux 因为第一个容器的第一个孩子又不是 .foo。

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

Answer 8

:eq 是基于数组索引的，所以它从 0 开始。它也不是 Css 规范的一部分。

而 :nth-child 是 Css 规范的一部分，指的是 DOM 树中的元素位置。

在使用方面，它们都做同样的事情。

演示here