Heim > Artikel > Web-Frontend > So fragen Sie untergeordnete Elemente mit jquery ab
So fragen Sie untergeordnete Elemente mit jquery ab
- 青灯夜游Original
- 2022-03-18 14:52:227128Durchsuche
So fragen Sie untergeordnete Elemente mit jquery ab: 1. Verwenden Sie die Methode children(), um die direkten Teilmengenelemente unter dem angegebenen Element abzurufen. 2. Verwenden Sie die Methode find(), um alle (einschließlich Teilmengen von Teilmengen) unter dem angegebenen Element abzurufen ) Teilmengenelemente.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jQuery-Selektor für untergeordnete Elemente find() undchildren()
children()-Methode: Ruft die direkten Teilmengenelemente unter diesem Element ab.
find()-Methode: Ruft die direkten Teilmengenelemente darunter ab Element Alle Teilmengenelemente (einschließlich Teilmengen von Teilmengen)
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*background-color: pink;*/
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class="no1">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined
// $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
</script>
</html>
Zu diesem Zeitpunkt öffnen wir das Suchelement und kommentieren
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*background-color: pink;*/
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class="no1">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
// console.log($("div").children(".no1")[0]);
$("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
console.log($("div").find(".no1")[0]);
</script>
</html>Entsprechender Screenshot:
Um den Unterschied zusammenzufassen:
children() Die Methode gibt alle direkten untergeordneten Elemente des ausgewählten Elements zurück (direkte untergeordnete Elemente, sucht nur nach Söhnen und nicht nach Enkeln (das heißt, es wird nicht rekursiv durchlaufen). Die Methode find() ruft die Nachkommen jedes Elements ab im aktuellen Elementsatz (Beachten Sie, dass die find()-Methode Parameter übergeben muss, sonst ist sie ungültig)
jQuery-Video-Tutorial
,Web-Frontend]
Das obige ist der detaillierte Inhalt vonSo fragen Sie untergeordnete Elemente mit jquery ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!