jQuery difference between :eq() and :nth-child()

Question

In jQuery, what are some of the key differences between using :eq() and :nth-child() to select any elements ?

Also in general, for the starting index, in which case does it start from "0" and when it starts from "1" ?

Answer 1

eq() starts with 0, while nth-child() starts with 1

see differences clearly here http://jsfiddle.net/9xu2R/

Answer 2

CSS :first-child, :nth-child, and :last-child are not like :eq

So if we had a snippet of HTML like

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

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

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.

Likewise, :nth-child can match children in multiple containers. In the HTML snippet:

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

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

Answer 3

: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.

: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.

Further discussion of this unusual usage can be found in the W3C CSS specification.

Detailed Comparision

See the Demo: http://jsfiddle.net/rathoreahsan/sXHtB/ -- Link updated

Also See the references

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

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

Answer 4

:eq is array indexed based, so it starts from 0. It is also not part of the Css specification.

Whereas :nth-child is part of the Css specification and refers to the element position in a DOM tree.

In terms of usage, they both do the same thing.

Demo here

Answer 5

:eq() allows you to access the elements in the jQuery object by index

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

:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.

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.

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.

Answer 6

:nth-child() Selector: selects all elements that are the nth-child of their parent.

:eq() Selector: Select the element at index n within the matched set.

See: http://api.jquery.com/eq-selector/ and http://api.jquery.com/nth-child-selector/

Good luck.