Maison >interface Web >js tutoriel >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

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

伊谢尔伦original: 2018-05-15 11:11:562900parcourir

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;); 
});

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>

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

Faites attention à la dernière balise "e388a4556c0f65e1904146cc1a846bee", 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;);

Faites attention à la première balise "e388a4556c0f65e1904146cc1a846bee" 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 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>

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 css firebug var dom 选择器 border ul li

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：Explication détaillée des exemples d'utilisation de la fonction jQuery is()Article suivant：Explication détaillée des exemples d'utilisation de la fonction jQuery is()

Articles Liés

Voir plus