Maison > Article > interface Web > Méthode JQuery pour parcourir le DOM nodes_jquery

Méthode JQuery pour parcourir le DOM nodes_jquery

WBOYoriginal: 2016-05-16 15:55:401357parcourir

L'exemple de cet article décrit comment JQuery traverse les nœuds DOM. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le cœur de cette section est de présenter les opérations DOM de JQuery. Nous avons introduit de nombreuses opérations de nœud telles que la création, la suppression, le remplacement, etc. Voici quelques méthodes pour parcourir les nœuds, sélectionner les nœuds adjacents, etc.

Méthode children()

Cette méthode est utilisée pour obtenir l'ensemble des éléments enfants de l'élément correspondant. Selon la structure de l'arborescence DOM, vous pouvez connaître la relation entre chaque élément et le nombre de leurs nœuds enfants.

Ce qui suit utilise 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 ); // <p>元素下有3个子元素 
for(var i=0;i< $ul.length;i++){ 
  alert( $ul[i].innerHTML ); 
}

PS : La méthode children() ne considère que les éléments enfants et ne considère aucun élément descendant.

Méthode next()

Cette méthode est utilisée pour obtenir les éléments frères immédiatement derrière l'élément correspondant. À partir de la structure de l'arborescence DOM, nous pouvons savoir que le prochain nœud frère de l'élément p est ul, donc l'élément ul peut être obtenu via la méthode next(). Le code est le suivant :

var $p1 = $("p").next();
// 紧邻p元素后的同辈元素

Méthode prev()

Cette méthode est utilisée pour obtenir les éléments frères immédiatement avant l'élément correspondant. À partir de la structure de l'arborescence DOM, nous pouvons savoir que le nœud frère précédent de l'élément ul est p, nous pouvons donc obtenir l'élément p via la méthode prev(). Le code est le suivant :

var $ul = $("ul").prev();
// 紧邻ul元素前的同辈元素

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. Prenons l'exemple de la structure de l'arborescence DOM. L'élément ul et l'élément p sont des éléments frères l'un de l'autre, et les trois éléments li sous l'élément ul sont également des éléments frères l'un de l'autre.

Si vous souhaitez obtenir les éléments frères de l'élément p, vous pouvez utiliser le code suivant :

var $p2 = $("p").siblings();
// 紧邻p元素的唯一同辈元素

Méthode closest()

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 qu'un élément correspondant au sélecteur soit trouvé. 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"); 
})

De plus, il existe de nombreuses méthodes pour parcourir les nœuds dans JQuery, telles que find(), filter(), nextAll(), prevAIl(), parent() et parents(), etc., qui ne seront pas décrites ici, les lecteurs peuvent consulter le document de triche JQuery en annexe. Il convient de noter que ces méthodes de traversée du DOM ont une chose en commun : elles peuvent toutes utiliser des expressions JQuery comme paramètres pour filtrer les éléments.

J'espère que cet article sera utile à la programmation jQuery de chacun.

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：Téléchargez des fichiers sans actualiser et renvoyez des valeurs personnaliséesArticle suivant：Téléchargez des fichiers sans actualiser et renvoyez des valeurs personnalisées

Articles Liés

Voir plus