Video tutorial illustrating the syntax of Descendant selectors.
For the purpose of demonstration, we are using simple html structure. It may not suit the requirement of a descendant selector, but we’re using it to keep things simple and easy to understand the syntax of descendant selectors.
In a complex xHTML or XML structure we could have multiple p tags nested inside a div tag and you want one of these p tags to work on. In such a complex case, you are better to go with descendant selectors.
You could select it as follows:
1 | $("div p:first") |
Here it selects the first p tag present inside the div.
jQuery uses simple verbs like first, append, remove etc: which we’ll cover in upcoming tutorials.
Video Tutorial: Descendant Selectors: jQuery
[youtube https://www.youtube.com/watch?v=t044xeB1wKQ]
xHTML code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html>
<head><title>Descendant Selectors</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="main">
<div>
<p>Technotip IT Solutions</p>
</div>
</div>
<button id="main_div">Main Div</button>
<button id="sub_div">Sub Div</button>
<button id="sub_div_para">Sub Div Paragraph</button>
<script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>
</body>
</html> |
In the xHTML file, observe the nesting of elements / tags. And the id’s given to div and the buttons.
jQuery Code
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(document).ready( function() {
$("#main_div").click( function() {
$("#main").css("background-color", "black");
});
$("#sub_div").click( function() {
$("div div").css("background-color", "yellow");
});
$("#sub_div_para").click( function() {
$("div div p").css("color", "orange");
});
}); |
To know about .css method of jQuery watch: Animation of Text and Image: jQuery
Observe the descendant selectors in above code.
To select a div inside another div, we write:
1 | $("div div") |
To select a p tag inside a div which is inturn inside another div, we write:
1 | $("div div p") |
We could even combine the id, class names and the tag names while selecting the elements.
class name: para
1 | $("div div p.para") |
ID name: para
1 | $("div div p#para") |
Optimization Tip:
Being as specific as possible helps speedup the process of selecting the element.
