So fragen Sie untergeordnete Elemente mit jquery ab-Front-End-Fragen und Antworten-php.cn

So fragen Sie untergeordnete Elemente mit jquery ab

青灯夜游

Freigeben： 2022-03-18 14:52:22

Original

7210 Leute haben es durchsucht

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.

So fragen Sie untergeordnete Elemente mit jquery ab

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:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
	// $("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
</script>
</html>

Nach dem Login kopieren

So fragen Sie untergeordnete Elemente mit jquery ab

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:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	// console.log($("div").children(".no1")[0]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

Nach dem Login kopieren

Entsprechender Screenshot:

So fragen Sie untergeordnete Elemente mit jquery ab

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)

[Empfohlenes Lernen:

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!