jQuery之间的区别：eq（）和：nth-child（） [英] jQuery difference between :eq() and :nth-child()
问题描述
在jQuery中，使用：eq（）和：nth-child（）来选择任何元素之间的一些主要区别是什么？
In jQuery, what are some of the key differences between using :eq() and :nth-child() to select any elements ?
对于起始索引，在这种情况下，它从0开始，何时从1开始？
Also in general, for the starting index, in which case does it start from "0" and when it starts from "1" ?
推荐答案
strong>：eq（）
:eq()
在匹配集中的索引n处选择元素。
Select the element at index n within the matched set.
与索引相关的选择符（：eq（），：lt（），：gt（），：even，：odd）过滤与之前的表达式匹配的元素集。它们根据该匹配集中的元素的顺序缩小设置。例如，如果首先使用类选择器（.myclass）选择元素，并返回四个元素，则为这些选择器的目的，这些元素将被赋予索引0到3。
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.
：nth-child（）
选择所有元素
Selects all elements that are the nth-child of their parent.
由于jQuery的实现：nth-child（n）是严格从CSS规范派生的，n的值为1-索引，这意味着计数从1开始。然而，对于所有其他选择器表达式，jQuery遵循JavaScript的0索引计数。因此，给定一个包含两个< li> s， $（'li：nth-child（1）'）选择第一个< li> 而 $（'li：eq（1）'）选择第二个
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.
：n（n）伪类很容易与：eq（n）混淆，即使两者可能导致显着不同的匹配元素。使用：nth-child（n），不管它们是什么，都会对所有的孩子进行计数，只有当与附加到伪类的选择符匹配时才选择指定的元素。使用：eq（n）只对附加到伪类的选择器进行计数，不限于任何其他元素的子元素，并且选择第（n + 1）个（n为0）。
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.
：nth-child（an + b）伪类符号表示在文档树中具有+ b-1兄弟节点的元素，任何正整数或零值的n，并具有父元素。对于a和b的值大于零，这将有效地将元素的子元素划分为元素组（最后一组取余数），并选择每个组的第b个元素。例如，这允许选择器对表中的每一行进行寻址，并且可以用于以四个周期替换段落文本的颜色。 a和b值必须是整数（正，负或零）。元素的第一个子元素的索引为1。
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.
除此之外，nth-child（）可以将odd和even作为参数。 奇与2n + 1相同，偶与2n相同。
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.
详细比较 strong>
请参阅演示： http://jsfiddle.net/rathoreahsan/ sXHtB / - 链接更新
See the Demo: http://jsfiddle.net/rathoreahsan/sXHtB/ -- Link updated
另请参阅参考资料
http://api.jquery.com/eq-selector/
http://api.jquery.com/nth-child-selector/
这篇关于jQuery之间的区别：eq（）和：nth-child（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
