There are two main methods which can be used to traverse a DOM while finding the descendants of an element. Using jQuery's below mentioned methods we can traverse the DOM tree to the botom while finding all the descendants.
1-) children()
2-) find()
A descendant can be chidl, grandchild, great-grandchild of an element.
With jQuery we can traverse down the DOM tree to find descendants of an element traversing Down the DOM Tree.
We can also use some more jQuery methos to traverse the descendants of an element such as next , nextall, nextUntil, last.
Example 1 of jQuery children() Method:
<!DOCTYPE html>
<html>
<head>
<style>
.grandchild * {
display: block;
border: 1px solid blue;
padding: 4px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children("p.2nd").css({'border-radius':'10px','borderColor' : 'limegreen'});
});
</script>
</head>
<body>
<div class="grandchild" style="width:800px;">div (current element)
<p class="1st">p (child)
<span>spanelement 1 (grandchild)</span>
</p>
<p class="2nd">p (child)
<span>spanelement 2 (grandchild)</span>
</p>
</div>
</body>
</html>
jQuery's children() method returns all the children of the selected element only single level down the DOM tree. We can also use a parameter to filter the children.
jQuery's find() method, returns descendant elements of the selected element, all the way to the bottom of the selected element.
Example 2 of jQuery find() Method:
<!DOCTYPE html>
<html>
<head>
<style>
.finddescendant * {
display: block;
border: 1px solid blue;
padding: 4px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("span").css({'border-radius':'10px','borderColor' : 'limegreen'});
});
</script>
</head>
<body>
<div class="finddescendant" style="width:800px;">div (This is current element)
<p>p (This is child element)
<span>span (This is grandchild)</span>
</p>
<p>p (This is child)
<span>span (This is grandchild)</span>
</p>
<p>p (This is child)
<span>span (This is grandchild)</span>
</p>
</div>
</body>
</html>
In the above example, all the span element that are child to the div with class find descendant will have the rounded border at the corner
Another example of find method
<!DOCTYPE html>
<html>
<head>
<style>
.finddescendant * {
display: block;
border: 1px solid blue;
padding: 4px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul").find("span").css({'border-radius':'10px','borderColor' : 'limegreen'});
});
</script>
</head>
<body>
<div class="finddescendant">
<div style="width:800px;">div
<ul>ul
<li>li
<span>span</span>
</li>
</ul>
</div>
</div>
</body>
</html>
0 Comment(s)