Today we are speculating about custom selectors that were added to the jQuery library in an attempt to address commom DOM traversal needs not met by the CSS specifications.
Let`s examine the results of jQuery custom selectors by means of HTML code. For example, we have unordered list with 6 different items.
1. :eq(n) – selects the element at index n.
$(‘ li : eq(3) ‘) – selects the 4th <li> element, since JavaScript arrays use 0-based indexing.
2. :nth(n) – is a synonym for previous selector.
$(‘ li : nth(3) ‘) – also selects the 4th <li> element.
3. :nth-child(n) – also selects the element at index n BUT uses 1-based indexing.
$(‘ li : nth-child(3) ‘) – selects 3d list item
4. :first – selects the 1st element. Also it could be written as eq(0) , nth(0), nth-child(1), lt(1), first-child
$(‘ li : first ‘) = $(‘ li : eq(0) ‘) = $(‘ li : nth(0) ‘) = $(‘ li : lt(1) ‘) = $(‘ li : nth-child(1) ‘) = $(‘ li : first-child ‘)
5. :last – selects the last element. Despite of :first pseudo-class that has 4 equivalents, :last pseudo-class is unique.
$(‘ li : last ‘)
6. :even – selects the even-indexed list items within the set. Notice, that it also uses 0-based indexing.
$(‘ li : even ‘)
7. :odd – selects the odd-indexed elements.
$(‘ li : odd ‘)
8. :gt(n) – selects all elements at an index greater than n
$(‘ li : gt(2) ‘) – selects all elemnts following the 3d one. Be careful with indexes.
9. :lt(n) – selects all elements at an index less than n
$(‘ li : lt(2) ‘) – selects all list items preceding the 3d one.
10. :parent – selects all elemnts that are parent of another element, even including text nodes.
$( ‘ :parent ‘ ) – selects ul tag
11. :contains(text) – selects all elements that contain the specified text.
$( ‘ li:contains (Magento) ‘ ) – selects 4th list item
12. :has(elem) – selects all elements that contain an element matching elem.
$( ‘ li:has (img) ‘ ) – selects the 3d list item since it has img element
13. :visible – selects all elements that are currently visible on the page. Rather than relying on the CSS properties assigned to the element.
$( ‘ li:visible ‘ ) – selects all list items
If the element satisfies any of these 4 conditions:
- an ancestor element is hidden.
- display=none;
- type=”hidden”;
- width=0 and height=0;
it won`t be matched by this selector.
14. :hidden – select all elements that are hidden.
$( ‘ li:visible ‘ ) – selects nothing, since all list items are visible.
