Maison > Article > interface Web > Comment interroger des éléments enfants avec jquery

Comment interroger des éléments enfants avec jquery

青灯夜游original: 2022-03-18 14:52:227179parcourir

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.

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>

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>

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!

jquery 递归选择器

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Plusieurs éléments de jquery peuvent-ils être liés à un événement ?Article suivant：Plusieurs éléments de jquery peuvent-ils être liés à un événement ?

Articles Liés

Voir plus