Javascript :eq() 和 :nth-child() 之间的 jQuery 区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7039966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery difference between :eq() and :nth-child()
提问by testndtv
In jQuery, what are some of the key differences between using :eq() and :nth-child() to select any elements ?
在 jQuery 中，使用 :eq() 和 :nth-child() 选择任何元素之间的一些主要区别是什么？
Also in general, for the starting index, in which case does it start from "0" and when it starts from "1" ?
另外一般来说，对于起始索引，在什么情况下它从“0”开始，什么时候从“1”开始？
回答by Ahsan Rathod
:eq()
:eq()
Select the element at index n within the matched set.
The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.
选择匹配集合中索引 n 处的元素。
与索引相关的选择器（:eq()、:lt()、:gt()、:even、:odd）过滤与它们之前的表达式匹配的元素集。他们根据匹配集合中元素的顺序缩小集合的范围。例如，如果首先使用类选择器 (.myclass) 选择元素并返回四个元素，则为了这些选择器的目的，这些元素被赋予索引 0 到 3。
:nth-child()
:nth-child()
Selects all elements that are the nth-child of their parent.
Because jQuery's implementation of :nth-child(n) is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript's "0-indexed" counting. Therefore, given a single containing two
<li>s,$('li:nth-child(1)')selects the first<li>while$('li:eq(1)')selects the second.The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element. For values of a and b greater than zero, this effectively divides the element's children into groups of a elements (the last group taking the remainder), and selecting the bth element of each group. For example, this allows the selectors to address every other row in a table, and could be used to alternate the color of paragraph text in a cycle of four. The a and b values must be integers (positive, negative, or zero). The index of the first child of an element is 1.
In addition to this, :nth-child() can take ‘odd' and ‘even' as arguments instead. ‘odd' has the same signification as 2n+1, and ‘even' has the same signification as 2n.
选择作为其父元素的第 n 个子元素的所有元素。
因为 jQuery 的 :nth-child(n) 实现严格源自 CSS 规范，所以 n 的值是“1-indexed”，这意味着从 1 开始计数。然而，对于所有其他选择器表达式，jQuery 遵循 JavaScript 的“ 0 索引”计数。因此，给定一个包含两个
<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) 伪类表示法表示在文档树中，对于任何正整数或零值 n，在它之前具有 an+b-1 兄弟元素的元素，并且具有父元素。对于大于零的 a 和 b 值，这有效地将元素的子元素划分为一组 a 元素（最后一组取余数），并选择每个组的第 b 个元素。例如，这允许选择器在表格中每隔一行寻址，并可用于以四为循环交替段落文本的颜色。a 和 b 值必须是整数（正数、负数或零）。元素的第一个子元素的索引为 1。
除此之外， :nth-child() 可以将 'odd' 和 'even' 作为参数。“奇数”与 2n+1 的含义相同，“偶数”与 2n 的含义相同。
Further discussion of this unusual usage can be found in the W3C CSS specification.
可以在W3C CSS 规范中找到对这种不寻常用法的进一步讨论。
Detailed Comparision
详细比较
See the Demo: http://jsfiddle.net/rathoreahsan/sXHtB/-- Link updated
查看演示：http: //jsfiddle.net/rathoreahsan/sXHtB/——链接更新
Also See the references
另见参考资料
http://api.jquery.com/eq-selector/
http://api.jquery.com/eq-selector/
回答by defuz
:nth-child()Selector: selects all elements that are the nth-childof their parent.
:eq()Selector: Select the element at index n within the matched set.
:nth-child()选择器：选择作为其父元素的第 n个子元素的所有元素。
:eq()选择器：选择匹配集合中索引 n 处的元素。
See: http://api.jquery.com/eq-selector/and http://api.jquery.com/nth-child-selector/
请参阅：http: //api.jquery.com/eq-selector/和http://api.jquery.com/nth-child-selector/
Good luck.
祝你好运。
回答by MikeBaker
:eq()allows you to access the elements in the jQuery object by index
:eq()允许您通过索引访问 jQuery 对象中的元素
http://api.jquery.com/eq-selector/
http://api.jquery.com/eq-selector/
:nth-childalso allows you to access the an element by index, however it only applies to the term to the immediate left of it.
:nth-child还允许您按索引访问元素，但它仅适用于紧邻其左侧的术语。
http://api.jquery.com/nth-child-selector/
http://api.jquery.com/nth-child-selector/
This means that if you want to pick one element from a selector then use :eq if you want to restrict selections to elements with n-1 preceding-sibilings then use nth-child.
这意味着如果您想从选择器中选择一个元素，则使用 :eq 如果您想将选择限制为具有 n-1 个前置兄弟的元素，则使用 nth-child。
Javascript arrays are usually indexed from 0; however nth-child is indexed from 1 because it is technically a CSS property as opposed to a jQuery one.
Javascript 数组通常从 0 开始索引；但是 nth-child 从 1 开始索引，因为它在技术上是一个 CSS 属性，而不是 jQuery 属性。
回答by JSantos
eq() starts with 0, while nth-child() starts with 1
eq() 从 0 开始，而 nth-child() 从 1 开始
see differences clearly here http://jsfiddle.net/9xu2R/
在这里清楚地看到差异 http://jsfiddle.net/9xu2R/
回答by somdip
$("#dataTable tr:nth-child(1) td:nth-child(2)").html();
here dataTable is a table
这里 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>
The nth-childselector of jquery will help you to fetch the exact cell values from this table. A practical example where tr:nth-child(1)td:nth-child(2)fetches the 1,2 cell of the table.
nth-childjquery的选择器将帮助您从该表中获取准确的单元格值。tr:nth-child(1)td:nth-child(2)获取表格的 1,2 单元格的实际示例。
回答by karadeniz
nth-child selects the nth child of parent object(s) other selects n-th element in a collection (index starting from 0 or 1 is only a trivial part the difference). so saying tr td:nth-child(5) selects every tr and gets their 5th children where as eq gets all tds in all trs and selects only 5th td ... The main difference is that. Indeed the wording of the documentation does not point out that fact straight but garbles the words like it is black magic ...
nth-child 选择父对象的第 n 个孩子，其他选择集合中的第 n 个元素（从 0 或 1 开始的索引只是差异的一个微不足道的部分）。所以说 tr td:nth-child(5) 选择每个 tr 并获得他们的第 5 个孩子，而 eq 获得所有 trs 中的所有 tds 并只选择第 5 个 td ......主要区别在于。事实上，文档的措辞并没有直接指出这一事实，而是把这些词弄得乱七八糟，就像是黑魔法……
回答by Steve Phuc
CSS :first-child, :nth-child, and :last-child are not like :eq
CSS :first-child、:nth-child 和 :last-child 不像 :eq
So if we had a snippet of HTML like
所以如果我们有一段 HTML 像
<div>
<div id="bar1" class="foo"></div>
<div id="bar2" class="foo"></div>
<div id="bar3" class="foo"></div>
</div>
Then the selector .foo:nth-child(2)will match the div #bar2. If we insert another element at the front of the container:
然后选择器 .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>
And again we select .foo:nth-child(2), we match the div #bar1 because the 2nd child of the container also matches .foo.
我们再次选择 .foo:nth-child(2)，我们匹配 div #bar1，因为容器的第二个孩子也匹配 .foo。
Thus, in this second example, if we try .foo:nth-child(1) or the equivalent .foo:first-child, we will not match any elements because the first child element in that container — the p tag — does not match .foo.
因此，在第二个示例中，如果我们尝试 .foo:nth-child(1) 或等效的 .foo:first-child，我们将不会匹配任何元素，因为该容器中的第一个子元素 — p 标记 — 不匹配匹配 .foo。
Likewise, :nth-child can match children in multiple containers. In the HTML snippet:
同样， :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>
the selector .foo:last-child will match the divs #bar3 and #quux; but .foo:first-child or .foo:nth-child(1) will only match #quux because the first child of the first container is, again, not a .foo.
选择器 .foo:last-child 将匹配 div #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
来源https://content.pivotal.io/blog/css-first-child-nth-child-and-last-child-are-not-like-eq
回答by Tomgrohl
:eqis array indexed based, so it starts from 0. It is also not part of the Css specification.
:eq是基于数组索引的，所以它从 0 开始。它也不是 Css 规范的一部分。
Whereas :nth-childis part of the Css specification and refers to the element position in a DOM tree.
而:nth-child是 Css 规范的一部分，指的是 DOM 树中的元素位置。
In terms of usage, they both do the same thing.
在使用方面，它们都做同样的事情。
Demo here
演示在这里
