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>
run this source code Browser View
  • Red
  • Blue
  • Green


Full Source
<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>
run this source code Browser View
  • Red
  • Blue
  • Green


Full Source
<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>
run this source code Browser View
  • Red
  • Blue
  • Green


Full Source
<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>