Heim > Artikel > Web-Frontend > So verwenden Sie die nächstgelegene Methode in JQuery
So verwenden Sie die nächstgelegene Methode in JQuery
- WBOYOriginal
- 2022-05-09 11:35:063317Durchsuche
In jquery wird die nächstgelegene Methode verwendet, um das erste Vorfahrenelement des ausgewählten Elements zurückzugeben. Diese Funktion kann ausgehend vom Element selbst nach oben passen und das erste übereinstimmende Element zurückgeben Objekt, die Syntax lautet „element object.closest (Selektorausdruck, der dem Element entspricht)“.
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.
So verwenden Sie die Methode „closest“ in jquery: Die Methode „closest()“ gibt das erste Vorgängerelement des ausgewählten Elements zurück.
Vorfahren sind Vater, Großvater, Urgroßvater und so weiter.
Beginnen Sie beim aktuellen Element, durchlaufen Sie den DOM-Baum und geben Sie den ersten einzelnen Vorfahren zurück, der mit dem übergebenen Ausdruck übereinstimmt. Dabei wird ein jQuery-Objekt zurückgegeben, das kein oder ein Element enthält.
Die Funktion „closest()“ prüft zunächst, ob das aktuelle Element übereinstimmt. Wenn es eine Übereinstimmung gibt, geben Sie das Element selbst direkt zurück. Wenn es keine Übereinstimmung gibt, suchen Sie Schicht für Schicht aufwärts nach dem übergeordneten Element, bis ein Element gefunden wird, das mit dem Selektor übereinstimmt. Wenn nichts gefunden wird, wird ein leeres jQuery-Objekt zurückgegeben.
Die Syntax lautet:
Gibt das erste Vorfahrenelement des ausgewählten Elements zurück:
$(selector).closest(filter)
Gibt das erste Vorfahrenelement im DOM-Baum zurück, das mithilfe des DOM-Kontexts gefunden wurde:
$(selector).closest(filter,context)
filter Erforderlich. Gibt einen Selektorausdruck, ein Element oder ein jQuery-Objekt an, das die Suche nach Vorgängerelementen einschränkt.
context Optional. Das DOM-Element, in dem das passende Element gefunden werden kann.
Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.ancestors *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点)
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 -->
</html>Ausgabeergebnis:
Empfohlenes zugehöriges Video-Tutorial:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die nächstgelegene Methode in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!