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" ?

Solution 1

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

Solution 2

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

Solution 3

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