www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery Parent / Child Selectors Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
In this lesson we are going to explore yet another jQuery selector that uses the parent / child relationships.

jQuery allows us to select elements based on their parent element. We can achieve this in one of the following two ways:

1. The first way allows us to find elements that are direct childs to some parent element.
2. The second way allows us to match all the way down through the hierarchy, e.g. a child of a child of a child of a parent element.

The syntax for finding child elements which are direct descendants of an element follows:

$("div > p ")

The above selector will find all <p> elements that are direct children of a <div> element. The key here is to use the > symbol.

The following example finds the <p> elements that are the direct children of the <div> element having the id "hw" and, then, adds some CSS to them:

<div id = "hw" > <p> Hello World! </p>
<p>Some More Text></p><br />
<div id = "abc" > <p>Hello World again! </p></div></div>

<script type = "text/javascript" >
$ ( function ()
{
$ ( "#hw > p " ). css ( "font-weight" , "bold" );
});
</script>

Finding the child of the child of a parent element is also very easy. We just need to replace > symbol from the $() to a blank space.

Here is an example:

<div id = "hw" > <p> Hello World! </p>
<p>Some More Text></p><br />
<div id = "abc" > <p>Hello World again! </p></div></div>

<script type = "text/javascript" >
$ ( function ()
{
$ ( "#hw p " ). css ( "font-weight" , "bold" );
});
</script>

Run the above two examples and see the difference.

Next >>> Lesson No. 10: jQuery Animations 1







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.