Comment interroger des éléments enfants avec jquery-Questions et réponses frontales-php.cn

Comment interroger des éléments enfants avec jquery

青灯夜游

Libérer： 2022-03-18 14:52:22

original

7230 Les gens l'ont consulté

Comment interroger des éléments enfants avec jquery : 1. Utilisez la méthode children() pour obtenir les éléments de sous-ensemble directs sous l'élément spécifié ; 2. Utilisez la méthode find() pour tout obtenir (y compris les sous-ensembles de sous-ensembles) sous l'élément spécifié ; . ) éléments du sous-ensemble.

Comment interroger des éléments enfants avec jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Sélecteur d'élément enfant jQuery find() et children()

children() : récupère les éléments du sous-ensemble direct sous cet élément
find() : récupère les éléments du sous-ensemble direct sous cet élément element Tous les éléments de sous-ensemble (y compris les sous-ensembles de sous-ensembles)

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

Copier après la connexion

Comment interroger des éléments enfants avec jquery

À ce moment, nous ouvrons l'élément de recherche et commentons

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

Copier après la connexion

Capture d'écran correspondante :

Comment interroger des éléments enfants avec jquery

Pour résumer la différence :

children() La méthode renvoie renvoie tous les éléments enfants directs de l'élément sélectionné (éléments enfants directs, recherche uniquement les fils et non les petits-enfants (: c'est-à-dire qu'elle ne traversera pas récursivement)

La méthode find() obtient les descendants de chaque élément dans l'ensemble d'éléments actuel (notez que la méthode find() doit transmettre des paramètres, sinon elle sera invalide)

[Apprentissage recommandé : Tutoriel vidéo jQuery, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!