jQuery Traversing Methods
jQuery provides a variety of methods that allow us to traverse the DOM. Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts.
Get all children elements
To get all the children element of an parent element, children() method can be used.
Syntax
$('selector').children([selector]);
The optional selector this method accepts, is used to filter the children.
$('ul').children().each(function (index) {
alert($(this).html());
});
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
Browser View
<html>
<head>
<title>jQuery DOM Traversing example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$('ul').children().each(function (index) {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
<button id="btn">Show child elements</button>
</body>
</html>
jQuery find() Method
The find() method returns descendant elements of the selected element.
Syntax
$(selector).find(selector elements)
A descendant is a child, grandchild, great-grandchild, and so on.
$('ul li').each(function(i){
alert($(this).html());
});
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
Browser View
<html>
<head>
<title>jQuery Dom find() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$('ul li').each(function(i){
alert($(this).html());
});
});
});
</script>
</head>
<body>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
<button id="btn">Show child elements</button>
</body>
</html>
jQuery children() Vs. find()
The children() only looks at the immediate children of the node, while find() traverses the entire DOM below the node, so children() should be faster given equivalent implementations. However, find() uses native browser methods, while children() uses JavaScript interpreted in the browser.
Get li attribute without using children() or find()
$('#colors li').each(function () {
var index = $(this).index();
var text = $(this).text();
var value = $(this).attr('value');
alert('Index is: ' + index + ' and text is ' + text + ' and Value ' + value);
});
<ul id="colors">
<li value="false">Red</li>
<li value="true">Blue</li>
<li value="false">Green</li>
</ul>
Browser View
<html>
<head>
<title>jQuery Dom example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$('#colors li').each(function () {
var index = $(this).index();
var text = $(this).text();
var value = $(this).attr('value');
alert('Index is: ' + index + ' and text is ' + text + ' and Value ' + value);
});
});
});
</script>
</head>
<body>
<ul id="colors">
<li value="false">Red</li>
<li value="true">Blue</li>
<li value="false">Green</li>
</ul>
<button id="btn">Get Values</button>
</body>
</html>