Exploring jQuery Selectors
page 3 of 11
by Nihar Ranjan Nayak
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 41368/ 79

Hierarchy Selectors

ancestor descendant

To find all descendant elements specified by "descendant" of elements specified by "ancestor". This includes all the child and grandchild elements. The following example finds all input elements present inside the element forms.  Any element outside the forms will not be matched.

                   $("form input")

Suppose there is a text box inside a DIV which is inside the forms. Then the DIV as well as the text box will be matched.

parent -> child

To find all child elements specified by "child" of elements specified by "parent". This will find only the immediate child elements not the grand child elements. The following code finds all the DIV inside form element. If there is a text box inside a DIV then that will not be matched. This is the difference between ancestor descendant and parent -> child Selectors.

                   $("form > div")

prev + next

This will find all next elements specified by "next" that are next to elements specified by "prev". Consider the following example :

                   $("label + input").css("color", "red").val("Hello!").


This will find all the input elements which are just next to any label element, apply the css properties and set the text to “Hello!”. If there are other input elements but not next to a label then those will not be selected.


Matches all sibling elements after the "prev" element that match the filtering "siblings" selector. Example :

                        $("#lblName ~ div")

This code finds only all the DIV elements that are siblings after the element #lblName. If there are any other elements which are siblings after the #lblName then those will not be selected.

View Entire Article

User Comments

Title: good   
Name: 00
Date: 2010-01-28 10:44:36 PM
Title: Request   
Name: Pls write more article on JQuery
Date: 2009-05-12 6:46:55 AM
Hello Nihar
Please write more articles on JQuery.
Tume lekha ame sahajare khali padhi kam akribu
How is the IDEA?
Excellent Idea...
Title: Ureka   
Name: Lulu
Date: 2009-05-11 10:26:46 AM
Really I have been searching this type of article for last 2 months.Thank you Nihar.
Title: Excellent boss   
Name: Sumoon
Date: 2009-05-11 10:23:15 AM
Excellent Article boos.Please post tghis type of usefull articles more

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-05-25 10:48:37 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search