Méthode jQuery traversée la plus proche ()

Avec l'élément sélectionné comme centre, la recherche à l'intérieur peut être effectuée via les méthodes find et children. Si vous effectuez une recherche vers le haut, c'est-à-dire pour trouver les éléments parents et ancêtres de l'élément actuel, jQuery fournit la méthode la plus proche(). Cette méthode est similaire aux parents mais présente quelques différences subtiles. C'est une méthode très fréquemment utilisée

. La méthode

closest() accepte une chaîne de sélection qui correspond à l'élément

en commençant par l'élément lui-même, en correspondant jusqu'à l'élément supérieur de l'arborescence DOM et en renvoyant le premier élément ancêtre correspondant

Par exemple : dans Dans l'élément div, recherchez vers le haut tous les éléments li, qui peuvent s'exprimer ainsi :

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

Remarque : jQuery est un objet de collection, donc la collection ou l'élément jQuery donné par la méthode le plus proche() est utilisé pour filtrer l'élément

également parce que jQuery est un objet de collection, éventuellement Cet objet de collection doit être filtré pour trouver l'élément cible, il est donc autorisé de transmettre un objet jQuery

Remarque : vous devez faire particulièrement attention lorsque vous l'utilisez ) et .closest() sont quelque peu similaires. Ils parcourent tous les deux les éléments ancêtres vers le haut. , mais il y a quand même une différence entre les deux, sinon il n'y aura aucun sens à l'existence

La position de départ est différente : le plus proche commence à partir de l'élément courant Les cibles de parcours des parents à partir de l'élément parent sont différentes :

le plus proche Pour trouver la cible spécifiée, les parents accèdent à l'élément racine du document, recherchent le plus proche vers le haut et arrêtent la recherche jusqu'à ce qu'ils trouvent une correspondance jusqu'à l'élément racine et ajoutent la correspondance. éléments à la collection

Les résultats sont différents : le plus proche renvoie un objet jquery contenant zéro ou un élément, et parents renvoie un objet jquery contenant zéro ou un ou plusieurs éléments

Jetons un coup d'œil à un morceau de 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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Méthode jQuery traversée la plus proche ()

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]