jQuery Ancestor Descendant Selector Example

jQuery ancestor descendant selector use DOM nested relational structure to find the web elements accurately. There are four type of such selector as below. Each expression contains two selectors the first selector and the second selector. In different cases, the selector represent different hierarchy web element.

1. jQuery Hierarchy Selector Introduction.

  1. ancestor descendant : Find all descendant web elements of ancestor. ancestor is a valid parent web elements selector, descendant is descendant web elements selector that exist under ancestor. For example $(“form input”) will match all input web elements under html form.
  2. parent > child : Find all direct child web elements under specified parent. For example $(“form > input”) will match only the direct ( first level child ) input web elements of html form.
  3. prev + next : Find the first neighbor web element ( specified by next selector ) of prev selector specified web element. $(“div + img”) will match only the first neighbor img web element after div.
  4. prev ~ siblings : Match all neighbor web elements of prev selector specified web element. $(“div ~ img”) will return all sibling img of div. But if the img is placed before div then it will not be returned.

2. jQuery Hierarchy Selector Example.

2.1 Ancestor Descendant Selector.

jquery ancestor descendant selector example

selector-ancestor-descendant.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ancestor Descendant Selector Example</title>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Get all input web element exist under form.
            var input_array = $("form input");

            // Get user name input dom object.
            var user_name_input = input_array.get(0);
            // Transform dom object to jquery object.
            user_name_input = $(user_name_input);
            // Set user name web element css style through jquery object css method.
            user_name_input.css({color:'yellow', background:'blue'});


            // Get password input dom object.
            var password_input = input_array[1];
            // Transform dom object to jquery object.
            password_input = $(password_input);
            // Set password web element style through jquery object css method.
            password_input.css({border:'red 2px solid'});
        })

    </script>
</head>
<body>

<form>
    <fieldset>
        <!--The first input exist under form / fieldset.-->
        User Name : <input type="text"/><br/>

        <fieldset>
            <!-- The second input exist under form / fieldset / fieldset. -->
            Password : <input type="password"/><br/>
        </fieldset>

        <button>Login</button>
    </fieldset>
</form>
</body>
</html>

2.2 Parent Child Selector.

jquery parent child selector example

selector-parent-child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Parent Child Selector Example</title>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Change the direct child img ( image one and three ) css style with selector "div > img".
            $("div > img").css({border:'red solid 10px', width:'100px'});

            // Change the second level child img ( image two ) css style with "div > fieldset > img" selector.
            $("div > fieldset > img").css({border:'green solid 10px', width:'80px'});
        })

    </script>
</head>
<body>

<div>
    <img src="../images/green_button.jpg"/>
    <fieldset>
        <img src="../images/green_button.jpg"/>
    </fieldset>
    <img src="../images/green_button.jpg"/>
</div>

</body>
</html>

2.3 Previous Next Selector.

jquery previous next selector example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Previous Next Selector Example</title>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Change the first next img css style with selector "div + img".
            $("div + img").css({border:'red solid 10px', width:'100px'});

            // Change the second next img css style with selector "div + img + img".
            $("div + img + img").css({border:'green solid 10px', width:'80px'});
        })

    </script>
</head>
<body>

<div>
    <img src="../images/green_button.jpg"/>
</div>
<img  src="../images/green_button.jpg"/>
<img  src="../images/green_button.jpg"/>
</html>

2.4 Previous Siblings Selector.

jquery previous sibling selector example

selector-prev-siblings.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Previous Siblings Selector Example</title>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Change the sibling img to div's css style with selector "div ~ img".
            $("div ~ img").css({border:'green solid 10px', width:'80px'});

            // Get all siblings image.
            var all_sibling = $("div ~ img");

            /* Display div sibling image count in an alert.
               Please note the image placed before div is not sibling image.*/
            alert("Will change div " + all_sibling.length + " sibling images css style.");

            // When click the first button.
            $("#change_first_sibling_image").click(function () {

                // Get and cast first sibling dom object to jquery object.
                var firstImage = all_sibling[0];
                firstImage = $(firstImage);
                // Change first image css style.
                firstImage.css({border:'red solid 15px', width:'60px'});
            });


            // When click the second button.
            $("#change_second_sibling_image").click(function () {

                // Get and cast second sibling dom object to jquery object.
                var secondImage = all_sibling[1];
                secondImage = $(secondImage);
                // Change second image style with jquery css method.
                secondImage.css({border:'blue solid 25px', width:'100px'});
            });

        })

    </script>
</head>
<body>
<img  src="../images/green_button.jpg"/>
<div>
</div>
<img  src="../images/green_button.jpg"/>
<img  src="../images/green_button.jpg"/>
<br/><br/>
<button id="change_first_sibling_image">Change First Sibling Image</button>
<button id="change_second_sibling_image">Change Second Sibling Image</button>
</body>
</html>
(Visited 74 times, 1 visits today)
READ :   jQuery Multiple Level Hierarchy Selector Example

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.