Question

在jQuery中，使用eq（）和：nth-child（）来选择任何元素之间有哪些主要区别？

同样一般来说，对于起始索引，在这种情况下它是从“0”开始还是从“1”开始？

Answer 1

<强>：当量（）

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

与索引相关的选择器（：eq（），：lt（），：gt（）,: even，：odd）过滤与其前面的表达式匹配的元素集。它们根据此匹配集中元素的顺序缩小设置。例如，如果首先使用类选择器（.myclass）选择元素并返回四个元素，则为了这些选择器的目的，这些元素被赋予索引0到3。

<强>：第n个孩子（）

选择所有父元素的第n个子元素。

因为jQuery的实现：nth-child（n）严格来自CSS规范，n的值是“1-indexed”，这意味着计数从1开始。然而，对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”计数。因此，如果一个包含两个<li> s，$('li:nth-child(1)')选择第一个<li>，而$('li:eq(1)')选择第二个{{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（）可以将'odd'和'even'作为参数。 'odd'与2n + 1具有相同的含义，'even'与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个先行sibilings的元素，那么使用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个子对象选择集合中的第n个元素（从0或1开始的索引只是差异的一个小部分）。所以说tr td：nth-child（5）选择每个tr并获得他们的第5个孩子，其中eq获得所有tds中的所有tds并且仅选择第5个td ...主要区别在于。事实上，文件的措辞并没有直截了当地指出这个事实，而是像黑魔法一样惹恼了......

Answer 7

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将匹配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

jQuery之间的区别：eq（）和：nth-child（）

8 个答案:

jQuery之间的区别：eq（）和：nth-​​child（）

8 个答案:

jQuery之间的区别：eq（）和：nth-child（）