Easy jQuery

Blog about jQuery - next generation JavaScript library.

Oct
12

jQuery selectors - Part III.

AlexGeneral


Content Filters.

:contains(text) - select all elements which contain given text.
This code will underline all divs which contain name John:

$("div:contains('John')").css("text-decoration", "underline");

Open this example in new window and view source code.

:empty - select all elements which has no any elements, nodes or texts.
This code will fill all empty cells of table whith text “This was empty!”:

$("td:empty").text("This was empty!");

Open this example in new window and view source code.

:has(selector) - select all elements which has at least one element specified by selector.
This code will add class .test to all divs which contains at least one tag <p>>:

$("div:has").addClass("test");

Open this example in new window and view source code.

:parent - select all elements that are parents (has at least one child element).
This code will select all cells which has child elements and change opacity of its background color:

$("td:parent").fadeTo(1500, 0.3);

Open this example in new window and view source code.


Visibility Filters.

:hidden - select all hidden elements or input fields.
This code will show all hidden divs and count hidden form elements:

$("div:hidden").show(3000);
$("span").text("Found " + $("input:hidden").length + " hidden inputs.");

Open this example in new window and view source code.

:visible - select all visible elements.
This code will set background color to yellow to all divs that are visible (than, we will show hidden divs to ensure that they are not changes color to yellow):

$("div:visible").css("background-color","yellow");
$("div:hidden").show(3000);

Open this example in new window and view source code.

Add A Comment