Maison > Article > interface Web > Comment parcourir les nœuds avec jquery
Comment parcourir les nœuds avec jquery
- coldplay.xixioriginal
- 2020-11-16 13:44:283963parcourir
La méthode de traversée des nœuds jquery : 1. Utilisez la méthode [children()] pour faire correspondre l'ensemble des éléments enfants de l'élément 2. Utilisez la méthode [next()] pour faire correspondre immédiatement les éléments frères ; derrière l'élément ; 3. Utilisez la méthode [prev ()] qui correspond aux éléments frères qui précèdent immédiatement l'élément.
L'environnement d'exploitation de ce tutoriel : système windows10, jquery2.2.4, cet article est applicable à toutes les marques d'ordinateurs.
Recommandé : "Tutoriel vidéo jquery"
Méthode Jquery pour parcourir les nœuds :
1. ) méthode
Cette méthode est utilisée pour obtenir l'ensemble des éléments enfants de l'élément correspondant.
Utilisez la méthode children() pour obtenir le nombre de tous les éléments enfants de l'élément correspondant.
var $body=$("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert("$body.length"); //<body>元素下有2个子元素
alert($p.length); //<p>元素下有0个子元素
alert("$ul.length"); //<ul>元素下有3个子元素
for(var i=0;len=$ul.length;i<len;i++)<br>{
alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容
}2. méthode next()
Cette méthode est utilisée pour obtenir les éléments frères immédiatement derrière l'élément correspondant.
var $p1=$("p").next;//Obtenir les éléments frères immédiatement après l'élément
Le résultat sera :
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>méthode prev().
Cette méthode est utilisée pour obtenir l'élément frère immédiatement avant l'élément correspondant
D'après la structure de l'arborescence DOM, nous pouvons savoir que le nœud frère précédent du
- , donc l'élément
- sous l'élément
- Si vous souhaitez obtenir les éléments frères de l'élément
, vous pouvez utiliser le code suivant :
//Obtenir les éléments frères immédiatement adjacents à l'élément element
Le résultat obtenu est :var $p2=$("p").siblings();<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul>5. close()
Il est utilisé pour obtenir l'élément correspondant le plus proche. Vérifiez d’abord si l’élément actuel correspond et si c’est le cas, renvoyez directement l’élément lui-même. S'il n'y a pas de correspondance, recherchez l'élément parent, étape par étape, jusqu'à ce que vous trouviez un élément qui correspond au sélecteur. Si rien n'est trouvé, un objet Jquery vide est renvoyé. Par exemple, pour ajouter de la couleur à l'élément li le plus proche de l'élément cible cliqué, vous pouvez utiliser le code suivant :$(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); })Recommandations d'apprentissage gratuites associées :
JavaScript (vidéo)
peut être obtenu via la méthode prev(). Le code est le suivant :
var $ul=$("ul").prev();//Obtenir le résultat de l'élément frère <.>
- Ce sera :
<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
Méthode Siblings()
Cette méthode est utilisée pour obtenir tous les éléments frères avant et après l’élément correspondant.
- et l'élément
sont des éléments frères l'un de l'autre, et les trois éléments
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!