Instances de méthode d'utilisation de sélecteurs jquery pour obtenir des éléments parents, des éléments enfants et des éléments frères et sœurs-js tutoriel-php.cn

Instances de méthode d'utilisation de sélecteurs jquery pour obtenir des éléments parents, des éléments enfants et des éléments frères et sœurs

伊谢尔伦

Libérer： 2018-05-15 11:11:56

original

2909 Les gens l'ont consulté

1. Obtenir les éléments parents

1. parent([expr]) : Obtenez tous les éléments parents de l'élément spécifié

<p id="par_p"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></p> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 
</span> 
$(
document
).ready(function(){ 
$("a").parent().addClass(&#39;a_par&#39;); 
});

Copier après la connexion

firebug Afficher l'effet parent jquery

2. Obtenir les éléments frères :
suivant([expr]) :
Obtenir l'élément frère suivant de l'élément spécifié (notez qu'il s'agit du suivant. Éléments de même niveau)

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/
javascript
" src="/jquery/jquery.js"></script> 
</head> 
<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 
<script> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>

Copier après la connexion

Le résultat de cet exemple est que seule la couleur d'arrière-plan de l'élément de liste 4 passe au rouge
2 nextAll([expr]) :
Obtenir tout. éléments après l'élément spécifié Éléments frères

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);

Copier après la connexion

Faites attention à la dernière balise "

", qui est également ajoutée avec le nom de classe 'p_next_all'~~
3. :
Récupérez tous les éléments frères derrière l'élément spécifié, puis ajoutez l'élément spécifié

<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p> 
var p_nex = $("p").nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);

Copier après la connexion

Faites attention à la première balise "

" balises suivant la balise p, ainsi que lui-même. . .
Les deux suivants ne donneront pas d'exemples spécifiques. Ils sont en fait l'opposé de next() et nextAll()
4 : obtenez l'élément frère précédent de l'élément spécifié (le précédent) ).
5. prevAll() : obtient tous les éléments frères devant l'élément spécifié.
3. Obtenez les sous-éléments
1. Méthode de recherche des sous-éléments 1 :>
Par exemple : var aNods = $("ul > a"); >2 , Méthode 2 pour trouver des éléments enfants : children()
3. Méthode 3 pour trouver des éléments enfants : find()
Nous présentons ici brièvement les similitudes et les différences entre children() et find() :
1> children et < La 🎜>méthode find
est toutes deux utilisées pour obtenir les sous-éléments de l'élément. Aucune d'elles ne renvoie un nœud de texte, tout comme la plupart des méthodes jQuery. 2> La méthode children n'obtient que les éléments enfants situés en dessous de l'élément, à savoir : les enfants immédiats. 3> La méthode find obtient tous les éléments subordonnés, à savoir : les descendants de ces éléments dans l'arborescence DOM
4> Le sélecteur de paramètre de la méthode children est facultatif (optionnel), utilisé pour filtrer les éléments enfants,
Mais la méthode de sélection de paramètres de la méthode find est requise.
5> La méthode find peut en fait être implémentée en utilisant jQuery (sélecteur, contexte). Autrement dit, $('li.item-ii').find('li') est équivalent à $('li', 'li.item-ii').
Exemple :

<. 🎜>Utilisez :$('ul.level-2').children().css('border', '1px solid green');

Utilisez $('ul.level-2').find(' li') .css('border', '1px solid green').

<ul class="level-1"> 
<li class="item-i">I</li> 
<li class="item-ii">II 
<ul class="level-2"> 
<li class="item-a">A</li> 
<li class="item-b">B 
<ul class="level-3"> 
<li class="item-1">1</li> 
<li class="item-2">2</li> 
<li class="item-3">3</li> 
</ul> 
</li> 
<li class="item-c">C</li> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul>

Copier après la connexion

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!