jQuery Custom Selectors – Beginner`s Guide

Total
0
Shares

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

1. :eq(n) – selects the element at index n.

$(‘ li : eq(3) ‘) – selects the 4th <li> element, since JavaScript arrays use 0-based indexing.

example1
2. :nth(n) – is a synonym for previous selector.

$(‘ li : nth(3) ‘) – also selects the 4th <li> element.

example1

3. :nth-child(n) – also selects the element at index n BUT uses 1-based indexing.

$(‘ li : nth-child(3) ‘) – selects 3d list item

example2
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 ‘)

example3
5. :last – selects the last element. Despite of :first pseudo-class that has 4 equivalents, :last pseudo-class is unique.

$(‘ li : last ‘)

example4
6. :even – selects the even-indexed list items within the set. Notice, that it also uses 0-based indexing.

$(‘ li : even ‘)

example5
7. :odd – selects the odd-indexed elements.

$(‘ li : odd ‘)

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

example7
9. :lt(n) – selects all elements at an index less than n

$(‘ li : lt(2) ‘) – selects all list items preceding the 3d one.

example8
10. :parent – selects all elemnts that are parent of another element, even including text nodes.

$( ‘ :parent ‘ ) – selects ul tag

example9
11. :contains(text) – selects all elements that contain the specified text.

$( ‘ li:contains (Magento)  ‘ ) – selects 4th list item

example10

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

example14

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

example11

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

Cloud Business Card free psd template

Today`s freebie is a simple business card called “In the Clouds”. I`ve made it 300dpi so it’s should be a high-quality print. Since you get psd file you can easily…

140+ High-Quality Social and Glyph Icon Sets 2011

Different goals – different website designs but you can definitely find something in common almost in every design. And it`s presence of  icons. Choice of icon set is depended on…

Freebie: Skull-Inspired Social Media Icons

Halloween is just around the corner, so it’s time to embellish your blog with proper decorations. There are various ways to adorn your website according to this holiday, you can…

30+ Captivating Dark Website Designs

Great website designs don’t have to be the clean or with white background (although, to tell the truth, we get used to black font on white background since it`s more readable…