Пример выбора дочерних и родительских элементов в jQuery

Селектор потомков-предков jQuery использует вложенную реляционную структуру DOM для точного поиска веб-элементов. Существует четыре типа таких селекторов, которые рассмотренны ниже. Каждое выражение содержит два селектора: первый селектор и второй селектор. В разных случаях селектор представляют разные веб-элементы иерархии.

1. Введение в средство выбора иерархии jQuery.

предок-потомок: найти все дочерние веб-элементы предка. предок - это допустимый селектор родительских веб-элементов, потомок - это селектор дочерних веб-элементов, которые существуют под предком. Например, $ («ввод формы») будет соответствовать всем вводимым веб-элементам в форме html.

parent> child: найти все прямые дочерние веб-элементы в указанном родительском элементе. Например, $ («form> input») будет соответствовать только прямым (дочерним уровням первого уровня) входным веб-элементам html-формы.

prev + next: найти первый соседний веб-элемент (указанный селектором next) в веб-элементе, заданном селектором prev. $ («Div + img») будет соответствовать только первому соседнему веб-элементу img после div.

prev ~ siblings: сопоставить все соседние веб-элементы веб-элемента, указанного в селекторе prev. $ («Div ~ img») вернет все изображения того же уровня, что и div. Но если img помещается перед div, он не возвращается.

2. Пример выбора иерархии jQuery.

2.1 Селектор потомков предков.

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 Селектор родительского и дочернего элемента.

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 Селектор «Предыдущий Следующий

<!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 Селектор предыдущих братьев и сестер.

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>
about-blog
О проекте

Блог посвящен созданию и продвижению сайтов в сети интернет, а также различным техническим и маркетинговым вопросам, которые так или иначе с этим связаны.