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>section suivante
