Comment obtenir le nœud d'élément parent, le nœud d'élément enfant et le nœud d'élément frère avec jQuery_jquery

L'exemple de cet article décrit comment jQuery obtient les nœuds d'éléments parents, les nœuds d'éléments enfants et les nœuds d'éléments frères. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Regardons d'abord ce code html. Toute la méthode d'obtention des nœuds (père, fils, frère, etc.) est basée sur ce code :

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

Acquisition du nœud parent JQUERY :

Il existe de nombreuses façons d'obtenir des éléments parents dans jquery, tels que parent(), parents(), close(), find, first-child, qui peuvent vous aider à trouver des nœuds parents, des nœuds enfants et des nœuds frères

Par exemple, nous utilisons parent() pour obtenir le nœud parent

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

Ensuite, nous parlerons principalement de la différence entre les méthodes parents() et close()

1. Le plus proche commence la correspondance et la recherche à partir de l'élément actuel, et les parents commencent la correspondance et la recherche à partir de l'élément parent

2. Closest recherche étape par étape jusqu'à ce qu'il trouve un élément correspondant, puis s'arrête vers le haut jusqu'à l'élément racine, puis place ces éléments dans une collection temporaire, puis utilise l'expression de sélection donnée pour filtrer

3. le plus proche renvoie 0 ou 1 élément, les parents peuvent contenir 0, 1 ou plusieurs éléments

Le code peut s'écrire ainsi :

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

Obtenir des nœuds frères JQUERY

Acquisition du nœud frère JQuery, notre idée est de trouver le nœud parent via le nœud actuel, puis de trouver le nœud enfant via le nœud parent, le code est le suivant

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

Une autre méthode consiste à utiliser la fonction siblings(), le code est le suivant

$(".title").siblings('ul');
//找到自己的兄弟节点ul

Obtenir des nœuds enfants JQUERY

Correspond au premier élément enfant : first ne correspond qu'à un seul élément, et ce sélecteur correspondra à un élément enfant pour chaque élément parent

$(".par:first-child");
//取得id为firstli的节点

Récupérez-le via le sélecteur, le code est le suivant :

$('#firstli h3.title');
//取得条目一的h3

Utilisez la fonction find(), comme mentionné ci-dessus, l'utilisation est la même

$("#firstli").find("h3");
//找到子兄弟节点h3

Utilisez la fonction children(), le code est le suivant

$("#firstli").children("h3.title");
//取得子节点h3、class为title 

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Algorithme de traversée JQuery et résumé des compétences", "Résumé des compétences d'opération de table jQuery (table) " , "Résumé des effets et techniques de glisser jQuery", "Résumé des techniques d'extension jQuery", "Résumé des effets spéciaux classiques courants jQuery" , "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "Plug-ins communs jQuery et résumé de l'utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.