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

by

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

More Related Contents:

  1. Get selected text from a drop-down list (select box) using jQuery
  2. How can I select an element by name with jQuery?
  3. jQuery DOM changes not appearing in view source
  4. Count immediate child div elements using jQuery
  5. How do I select text nodes with jQuery?
  6. Check if an image is loaded (no errors) with jQuery
  7. How to hide a in a menu with CSS?
  8. Find DOM element by ID when ID contains square brackets?
  9. jQuery selectors on custom data attributes using HTML5
  10. How can I get selector from jQuery object
  11. Testing if a checkbox is checked with jQuery
  12. jQuery : select all element with custom attribute [duplicate]
  13. Is there a DOM event that fires when an HTML select element is closed?
  14. Selecting multiple classes with jQuery
  15. Not class selector in jQuery
  16. jQuery single selector vs .find()
  17. jQuery find and replace string
  18. Converting a recursive function into an asynchronous CPS implementation (javascript)
  19. jQuery support “:invalid” selector
  20. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  21. How to set DOM element as first child?
  22. JQuery – animate moving DOM element to new parent?
  23. Open new window without focus on it [duplicate]
  24. How can I remove wrapper (parent element) without removing the child?
  25. Combine two selectors with one jQuery object
  26. window.getSelection return html [duplicate]
  27. What is the new proper way to use a child selector with a context node in jQuery?
  28. Best practice to avoid memory or performance issues related to binding a large number of DOM objects to a click event
  29. Why I cant use jQuery functionality
  30. How to check null objects in jQuery

Leave a Comment