jQuery traversal closest() method

With the selected element as the center, searching inside can be done through the find and children methods. If you search upward, that is, to find the parent and ancestor elements of the current element, jQuery provides the closest() method. This method is similar to parents but has some subtle differences. It is a method that is frequently used

closest( ) method accepts a selector string that matches the element

Start from the element itself, match up to the superior element step by step in the DOM tree, and return the first matched ancestor element

For example: in In the div element, search all li elements upwards, which can be expressed like this

$("div").closet("li')

Note: jQuery is a collection object , so the jQuery collection or element given by the closest() method

closest() method is used to filter the elements

Similarly because jQuery is a collection object, it is possible This collection object needs to be filtered to find the target element, so it is allowed to pass a jQuery object

Note: You need to pay special attention when using it

) and .closest() are somewhat similar. They both traverse the ancestor elements upwards, but there is still a difference between the two, otherwise there will be no meaning of existence.

The starting position is different: closest starts from the current element The traversal targets of parents starting from the parent element are different:

closest To find the specified target, parents traverses to the root element of the document, closest searches upwards, and stops searching until it finds a match. Parents searches all the way to the root element. And add the matching elements to the collection

The results are different: closest returns a jquery object containing zero or one element, and parents returns a jquery object containing zero or one or more elements

Let’s look at a piece of code

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 200px;
    }
    
    .left div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
    <h2>closest方法()</h2>
    <div class="left first-div">
    <div class="div">
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </div>
    </div>
    <br/>
    <button>点击：closest传递选择器 </button>
    <button>点击：closest传递一个元素对象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('li.item-1').closest('.level-2').css('border', '1px solid red');
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        var itemB = $('.item-b')
        $('li.item-1')
            .closest(itemB)
            .css('border', '1px solid blue');
    })
    </script>
</body>

</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 200px; } .left div { width: 350px; height: 150px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } span { color: blue; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>closest方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </div> </div> <br/> <button>点击：closest传递选择器 </button> <button>点击：closest传递一个元素对象</button> <script type="text/javascript"> $("button:first").click(function() { $('li.item-1').closest('.level-2').css('border', '1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { var itemB = $('.item-b') $('li.item-1') .closest(itemB) .css('border', '1px solid blue'); }) </script> </body> </html>

submit Reset Code

Automatic operation

jQuery traversal closest() method

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]