Wednesday, January 4, 2012

Parent Child Selector

The syntax for finding children which are direct descendants of an element looks like this:

$("div > a")

This selector will find all links which are the direct child of a div element. Replacing the greater-than symbol with a simple space will change this to match all links within a div element, no matter if they are directly related or not:

$("div a")

eg : 

<div id="divTest1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTest2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">

$("#divTest1 > b").css("color", "blue");
</script>
 
 
************************
 //here  bold tags blue if they are directly descending from the divTest1:
$("#divTest1 > b").css("color", "blue");
 
// //here  all the bold tags colour green within the divTest1:
$("#divTest1  b").css("color", "green");

 

No comments:

Post a Comment