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

Maison

interface Web

Questions et réponses frontales

Comment interroger des éléments enfants avec jquery

Mar 18, 2022 pm 02:52 PM

jquery 查询子元素

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!

Déclaration de ce site Web

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