Maison > interface Web > js tutoriel > le corps du texte

Tutoriel sur la différence entre parent(), parents() et parentsUntil() dans JQuery et comment l'utiliser

巴扎黑
Libérer: 2017-06-24 09:28:18
original
2042 Les gens l'ont consulté

parent() est en fait très simple, il spécifie simplement la couche externe de chaque élément dans le sélecteur. Par exemple, $("p"), le résultat est alors des données enveloppées dans

, telles que :

. S'il y en a plusieurs

, l'ensemble de résultats est un ensemble de objets . Vous pouvez utiliser eq(i), first(), last() pour localiser. Si les données sont

  • comment utiliser $("p").parent("li") le résultat de la requête est vide car la couche externe de

    est < ;p>.

    JQueryDans le manuel,

    <p><p>Hello</p></p><p class="selected"><p>Hello Again</p></p>
    Copier après la connexion
    <pre class="brush:php;toolbar:false">$("p").parent(".selected");
    Copier après la connexion
    //结果:
    Copier après la connexion
    [ <p class="selected"><p>Hello Again</p></p> ]
    Copier après la connexion

    peut être compris comme

    $("p").parent().find(".selected");
    Copier après la connexion

    Trouver le ou les plusieurs dont le parent direct est sélectionné.

    Donc parent() n'est pas très pratique.

    parents() correspond à tous les parents de chaque élément du sélecteur. Si le sélecteur a plusieurs parents, il renverra un ensemble de résultats. Les résultats de l'ensemble de résultats sont disposés de la couche interne à la couche externe. La couche la plus externe est l'intégralité de l'élément HTML, et la première est l'élément qui enveloppe étroitement chaque élément du sélecteur. Il n’y a aucun élément en double dans le jeu de résultats.

    De même, lorsque des paramètres sont pris, l'élément spécifié se trouve également dans le jeu de résultats

    $("p").parents(".selected");
    Copier après la connexion
    $("p").parents().find(".selected");
    Copier après la connexion

    Donc, si nous voulons trouver un certain parent du sélecteur, nous devons trouve d'abord tout son Père, puis trouve ce père.

    Lorsque nous voulons trouver un parent de l'élément courant, la syntaxe suivante est utilisée.

    $(this).parents("li");//$(this).parents().find("li");
    Copier après la connexion

    Donc parents() c'est très pratique. Très couramment utilisé.

    parentsJusqu'à(expr). Si parents() doit trouver tous les parents de chaque élément du sélecteur dans l'ensemble de l'élément HTML, alors la fonction de parentsUntil() est de limiter la portée de la recherche. Cette plage est $(expr).html()

    $("p").parents();//包含整个html 元素$("p").parentsUntil("html");//不包含整个html元素
    Copier après la connexion

    Les ensembles de résultats des deux expressions ci-dessus ne diffèrent que par un seul élément, qui est l'intégralité de l'élément html.

    $("p").parents();//包含整个html 元素$("p").parentsUntil();//包含整个html元素
    Copier après la connexion

    Lorsque parentsUntil() ne prend aucun paramètre, cela équivaut à parents();

    Les résultats dans l'ensemble de résultats de parentsUntil(expr) sont également disposés de la couche interne à la couche externe. parentUntil(expr) effectuera une recherche couche par couche en commençant par le premier élément parent qui enveloppe l'élément jusqu'à ce qu'il rencontre le premier élément qui correspond à l'expression (expr).

    $("p").parentsUntil(expr);
    Copier après la connexion

    équivaut à rechercher tous les éléments parents de chaque élément dans $("p") depuis l'intérieur et l'extérieur de $(expr)

    Afin de trouver celui spécifié plus précisément Les éléments peuvent être utilisés comme suit.

    $("p").parentsUntil("ul").find("li");
    Copier après la connexion

    Mais la méthode ci-dessus ne peut pas trouver ul>li, seulement ul * li. Parce que parentsUntil() renvoie le plus grand parent dans le jeu de résultats est ul>* et find consiste à rechercher les éléments qui n'incluent pas ul>* dans les éléments descendants de ul>*. Donc, s'il n'est pas possible d'utiliser cette méthode pour trouver ul>li

    Vous pouvez utiliser le code suivant pour interroger li sous tous les uls (première ligne) et tous les li sous l'ul le plus proche (deuxième ligne)

    $("p").parents("ul").find("li");$("p").parents("ul").eq(0).find("li");
    Copier après la connexion

    parentsJusqu'à (expr), le jeu de résultats renvoyé n'inclut pas expr lui-même, et si vous utilisez find() plus tard, il interrogera les éléments descendants du jeu de résultats, donc le résultat de la requête n'est pas les éléments enfants de expr mais deux sous-éléments de la première et de la deuxième génération.

    En raison de la performance des parentsJusqu'à ce qu'il soit généralement déconseillé de l'utiliser.

    parnetsUntil() peut être utilisé pour trouver certains éléments sous un module.

    Lorsque nous voulons opérer spécifiquement sur un élément du jeu de résultats, nous devons nous rappeler d'utiliser eq(i), first(), last() et d'autres fonctions pour obtenir la valeur , sinon l'opération est l'ensemble des résultats.

    Recherche dynamique des nœuds parents

    $(this).parent("li");//找到第一个包住$(this)的dom,如这个dom是li则返回他的对象,如果不是则返回空对象$(this).parents("li");//找到所有$(this)的父亲,并在其中找出所有的li的对象,组成结果集。结果集中结果由内之外排列$(this).parents().find("li");//同上。$(this).parents("li").eq(0);//$(this)外第一个包裹他的li对象$(this).parentsUntil("li");//$(this)外到第一个包裹他的li之内的所有的$(this)的父亲$(this).parentsUntil("ul").find("li");//$(this)在ul之前的那个父亲之内(不包括该父亲)找所有的li;如果<ul><li><p><a onclick="f()">中a是this的话,那么相当于$("li").find("li");最后结果之空。$(this).parents("li").sublings();//查找所在的li的所有同辈元素
    Copier après la connexion

    La fonction correspondant à parent() est children()

    La fonction correspondant à parents() est find()

    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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal