Heim > Artikel > Web-Frontend > Wie erhalte ich das übergeordnete Element eines Elements mit der Methode parent()? Detaillierte Erläuterung des Falls der parent()-Methode
Definition und Verwendung
parent() Ruft das übergeordnete Element jedes Elements im aktuellen Satz übereinstimmender Elemente ab. Das Filtern mit einem Selektor ist optional.
.parent(selector)
selector: Zeichenfolgenwert, der den Selektorausdruck enthält, der zum Abgleichen des Elements verwendet wird.
Grammatikstruktur:
$(":parent")
Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren verwendet, z. B. Klassenselektor und Elementselektoren und so weiter. Zum Beispiel:
$("div:parent").animate({width:"300px"})
Der obige Code kann die Breite eines Divs, das Text oder Elemente enthält, auf 300 Pixel festlegen .
Wenn nicht mit anderen Selektoren verwendet, ist der Standardstatus mit dem *-Selektor zu verwenden, zum Beispiel ist $(":parent") äquivalent zu $("*:parent").
Details
Angesichts eines jQuery-Objekts, das eine Sammlung von DOM-Elementen darstellt, können wir mit der Methode .parent() den DOM-Baum nach den übergeordneten Elementen dieser Elemente durchsuchen und ein neues erstellen die passenden Elemente des jQuery-Objekts. Die Methode .parents() ähnelt der Methode .parent(), außer dass letztere eine einzelne Ebene im DOM-Baum nach oben durchläuft.
Diese Methode akzeptiert einen optionalen Selektorausdruck desselben Typs wie das Argument, das wir an die Funktion $() übergeben haben. Wenn dieser Selektor angewendet wird, werden Elemente gefiltert, indem getestet wird, ob sie mit dem Selektor übereinstimmen.
Beispiel
Suchen Sie das übergeordnete Element jedes Absatzes mit der Klasse „ausgewählt“:
$("p").parent(".selected")Betrachten Sie diese Seite mit einer einfachen verschachtelten Liste:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<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>
</li>
<li class="item-iii">III</li>
</ul>Wenn wir mit Element A beginnen, können wir sein übergeordnetes Element finden:
$('li.item-a').parent().css('background-color', 'red');
Das Ergebnis dieses Aufrufs ist das Festlegen eines roten Hintergrunds für die Liste der Ebene 2. Da wir keinen Selektorausdruck angewendet haben, wird das übergeordnete Element natürlich Teil des Objekts. Wenn ein Selektor angewendet wird, wird vor dem Einbinden des Elements überprüft, ob es mit dem Selektor übereinstimmt.
Beispiel 1-Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php.cn</title>
<style type="text/css">
div{
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:parent").animate({width:"300px"})
})
})
</script>
</head>
<body>
<div>我是文本</div>
<div></div>
<button>点击查看效果</button>
</body>
</html>Beispiel 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php.cn</title>
<style type="text/css">
div{
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
span{border:1px solid green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("*:parent").animate({width:"300px"})
})
})
</script>
</head>
<body>
<div>我是文本</div>
<div></div>
<span>大家好</span>
<button>点击查看效果</button>
</body>
</html>Da der obige Code keinen Selektor angibt, der in Verbindung mit verwendet werden soll :parent-Selektor, wird also standardmäßig mit dem *-Selektor verwendet, sodass der Code die Breite von Elementen, die Text und Elemente enthalten, in einer benutzerdefinierten Animation auf 300 Pixel festlegen kann.
Das obige ist der detaillierte Inhalt vonWie erhalte ich das übergeordnete Element eines Elements mit der Methode parent()? Detaillierte Erläuterung des Falls der parent()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!