jQuery Traverse All Descendant Methods

jQuery Traverse All Descendant Methods

jquery traverse all descendants; In this tutorial, you will learn how to do get or find descendant elements using jquery method traversing methods.

jQuery Traversing Descendant

The jQuery Traversing Descendants means a child, grandchild, great-grandchild, and so on.

jQuery offers useful ways to use children () and find (), which you can use to easily find in dom trees at single or multiple levels or to obtain children or other ancestry of an element in the hierarchy.

jQuery children() Method

The jQuery children() method is used to get or find the direct children of the selected element.

Syntax children() Method

$("selector").children()

jQuery children() method By Example

This example will demostrate you how use children() method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery children() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>

<script type="text/javascript">
$(document).ready(function(){
    $(".childM").children().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p>This is paragraph</p>
        <p>This is another paragraph.</p>
        <ul class="childM">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery children() Method Example

Hello World

This is paragraph

This is another paragraph.

  • First
  • Second
  • Third

jQuery find() Method

Using the jQuery find() method to obtain descendant elements of the selected element.

Syntax find() Method

$("selector").find()

jQuery find() method By Example

This example will demostrate you how use find method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    .g_cls{
        background: #28BAA2;
    }        
</style>

<script type="text/javascript">
$(document).ready(function(){
    $(".container-find").find("li").addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container-find">
        <h3>Hello World</h3>
        <p>This is paragraph</p>
        <p>This is another paragraph.</p>
        <ul class="childM">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery find() Method Example

Hello World

This is paragraph

This is another paragraph.

  • First
  • Second
  • Third

Recommended jQuery Tutorials

  1. jquery keyup event example
  2. Jquery Click() Event Method with E.g.
  3. Event jQuery. Blur By Example
  4. jQuery form submit event with example
  5. jQuery Keypress() Event Detect ENTER key pressed
  6. keydown function jQuery
  7. List of jQuery Events Handling Methods with examples
  8. Jquery Selector by .class | name | #id | Elements
  9. How to Get the Current Page URL in jQuery
  10. jQuery Ajax Get() Method Example
  11. get radio button checked value jquery by id, name, class
  12. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  13. jQuery Get Data Text, Id, Attribute Value By Example
  14. Set data attribute value jquery
  15. select multiple class in jquery
  16. How to Remove Attribute Of Html Elements In jQuery
  17. How to Checked Unchecked Checkbox Using jQuery
  18. jQuery removeClass & addClass On Button Click By E.g.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

One reply to jQuery Traverse All Descendant Methods

  1. Thanks for sharing useful information.

Leave a Reply

Your email address will not be published. Required fields are marked *