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

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

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

Answer 4

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

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

Answer 6

: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