Comment obtenir le nœud parent d'un élément lorsque le parent a des frères et sœurs?

Veuillez jeter un oeil à l'extrait de code ci-dessous:

<div>
    <div></div>
    <div><!-- my target node -->
        <div><!-- not my target node -->
            <img /><!-- my source node -->
        </div>
    </div>
</div>

Comme vous pouvez le voir le img-elment a deux enfermant divs. Je veux que la première de ces deux enfermant divs être considéré comme le "vrai" parent (celui que j'ai besoin de trouver) de la img-elment parce qu'il a un frère div avant de sorte que la recherche se termine et le frère div et l'extérieur en joignant div sont ignorés.

Dans le cas où il n'y a pas de frères et sœurs, à tous, à l'extérieur div doit être donné; dans le cas où l'élément n'est pas fermé, l'élément lui-même doit être donné.

J'aimerais juste savoir comment cibler l'élément comme je l'ai expliqué via JavaScript.

  • element.parentNode ? developer.mozilla.org/en-US/docs/DOM/Node.parentNode
  • dom, des éléments ne jamais avoir un seul parent. Obtenez de l'img nœud, et vous pouvez trivialement obtenir de son parent avec .parentNode. en fait, vous pouvez utiliser .parentNode de suivre un nœud branche tout le chemin jusqu'à la racine de l'arbre.
  • Si vous avez des questions concernant les DOM structure, alors s'il vous plaît format HTML, de sorte que la structure est facilement reconnaissable. Merci!!!!
  • J'ai besoin de trouver le parent qui a des frères (ou a corps comme sa mère). Il suffit donc de la première des deux joignant les divs pour l'img est convenable pour moi, parce que la deuxième (de l'intérieur) n'a pas de frères, de sorte qu'il n'est pas utile pour moi.
InformationsquelleAutor P5music | 2012-10-12
  1. 16

    Donc, il sonne comme vous voulez le premier ancêtre qui a des frères et sœurs éléments. Si oui, vous pouvez le faire comme ceci:

    var parent = img.parentNode;

while (parent && !parent.previousElementSibling && !parent.nextElementSibling) {
    parent = parent.parentNode;
}

    Ou plus exactement peut-être écrit comme une do-while boucle:

    do {
    var parent = img.parentNode;
} while (parent && !parent.previousElementSibling && !parent.nextElementSibling);

    De sorte que la boucle se termine quand il en trouve un avec au moins un enfant de l'élément, ou quand il manque des ancêtres.

    Si vous savez si l'enfant vient avant ou après le parent, vous pouvez tester la qualité de l'un ou de l'autre.

    Notez également que vous aurez besoin d'une cale d'épaisseur pour le ***ElementSibling propriétés si vous êtes à soutenir les anciens navigateurs.

    Vous pouvez faire une fonction qui va le faire:

    function prevElement(el) {
    while ((el = el.previousSibling) && el.nodeType !== 1) {
        //nothing needed here
    }

    return el;
}

function nextElement(el) {
    while ((el = el.nextSibling) && el.nodeType !== 1) {
        //nothing needed here
    }

    return el;
}

    Ensuite utiliser les fonctions comme ceci:

    do {
    var parent = img.parentNode;
} while (parent && !prevElement(parent) && !nextElement(parent));
    • 1) ne "exécuter des ancêtres" signifie que l'élément de corps peut être donné comme un résultat si il n'y a pas de frères et sœurs? 2) est à votre commentaire (à une autre réponse) à propos d'une possible mise en forme des espaces frères et sœurs pertinent à mon problème?
    • 1) Oui, c'est possible. Vous pouvez ajouter une contrainte à un nom de nœud. 2) Il est pertinent pour la solution qu'il a fourni. L'espace compris entre le formatage fait un nœud de texte. Si j'avais utilisé nextSibling au lieu de nextElementSibling, alors que les espaces nœud de texte aurait compté comme un frère ou une sœur.
    InformationsquelleAutor I Hate Lazy
  2. 0

    Si vous ne savez pas combien de niveaux de l'élément parent est, il sera difficile de le sélectionner à l'aide de méthodes comme le element.getParent seul. Cependant, vous POUVEZ parcourir les nœuds parents jusqu'à ce que le nœud que vous êtes en train de regarder a des frères et sœurs et est l'enfant d'un body élément. Supposons que votre img balise est appelée par imgNode.

    function getParentWithSiblings(imgNode) {
    for( ; n; n = imgNode.parentNode) {
        if (n.nextSibling && n.parentNode.tagName == 'body') {
            return n;
       }
    }
}

    Dans le code ci-dessus, nous nous sommes progressivement itérer à travers les parents de l'image nœud. À chaque itération, nous vérifions si le nœud actuel (un parent de la img nœud) a un frère ou une sœur et est l'enfant d'un body tag.

    • n.parentNode.tagName == 'body': Pourquoi avez-vous besoin du parent de l'élément requis pour être body?
    • Vous ne pouvez pas compter sur .nextSibling seul à la recherche pour les éléments frères. Il y aura des nœuds de texte sur chaque côté de tout élément qui comprend des espaces de formatage (onglet et les caractères de saut de ligne), et .nextSibling comprennent les.
    • Je n'avais aucune idée que JS serait de voir les espaces supplémentaires sur les nœuds de texte. Merci!
    InformationsquelleAutor Grayson
  3. 0

    Juste au cas où vous êtes curieux, voici comment vous pourriez mettre en œuvre user1689607 réponse à l'aide de jQuery.

    function getAncestorWithSiblings(element) {
  var ancestor = element.parent();
  while (ancestor && ancestor.siblings().length === 0) {
    ancestor = ancestor.parent();
  }
  return ancestor;
}

    Si il est logique d'utiliser cette bibliothèque pour vos besoins dépend beaucoup du contexte, nous n'avons pas. Comme d'autres l'ont à juste titre souligné, vous n'avez pas besoin de jQuery pour résoudre ce problème, et il peut être inutilement poids lourd de la solution. Cela dit, il peut être très utile de la bibliothèque et il est certainement utile de votre compte si vous n'étiez pas conscients ou ne l'avais pas déjà penché sur la question.

    • Je vous remercie. Je sais que jQuery est très appréciée, mais ce problème ne semble pas en avoir besoin, alors pourquoi l'utiliser?
    InformationsquelleAutor Dan Tao