Obtenir les DOM chemin de l'cliqué <a>
HTML
<body>
<div class="lol">
<a class="rightArrow" href="javascriptVoid:(0);" title"Next image">
</div>
</body>
Pseudo-Code
$(".rightArrow").click(function() {
rightArrowParents = this.dom(); //.dom(); is the pseudo function ... it should show the whole
alert(rightArrowParents);
});
Message d'alerte serait:
corps div.lol un.rightArrow
Comment puis-je obtenir avec javascript/jquery?
- Près de deux exemplaires: stackoverflow.com/questions/4459143/...
- regardez ici stackoverflow.com/a/32623171/502860
Vous devez vous connecter pour publier un commentaire.
À l'aide de jQuery, comme ceci (suivi par une solution qui n'utilise pas jQuery, sauf pour le cas; beaucoup moins d'appels de fonction, si c'est important):
Live exemple:
JS:
HTML:
(Dans les exemples, j'ai mis à jour le
class
attribut sur ladiv
êtrelol multi
de démontrer la manipulation de plusieurs classes.)Qui utilise
parents
pour obtenir les ancêtres de l'élément qui a été cliqué, supprime lehtml
élément de viapas
(depuis que vous avez commencé àbody
), puis les boucles à travers la création d'entrées pour chacun des parents et en les poussant sur un tableau. Ensuite, nous utilisonsaddBack
pour ajouter lea
en arrière dans l'ensemble, ce qui modifie également la commande de l'ensemble de ce que tu voulais (parents
est spécial, il vous donne les parents dans le sens inverse de l'ordre que vous voulez, mais alorsaddBAck
il met en ordre DOM). Ensuite, il utiliseArray#join
pour créer un espace délimité par des cordes.Lors de la création de l'entrée, s'il y a quoi que ce soit sur
className
nous remplacer les espaces avec.
à l'appui des éléments qui ont plus d'une catégorie (<p class='foo bar'>
aclassName
="foo bar"
, de sorte que l'entrée sep.foo.bar
).Juste pour être complet, c'est un de ces endroits où jQuery peut-être exagéré, vous pouvez facilement le faire simplement en pied dans les DOM:
Live exemple:
JS:
HTML:
Il nous suffit d'utiliser la norme
parentNode
de la propriété de l'élément à plusieurs reprises pour marcher jusqu'à l'arbre jusqu'à ce que nous sommes à court de parents ou nous voyons lahtml
élément. Puis, nous inversons notre array (puisque c'est vers l'arrière à la sortie que vous voulez), et se joindre à elle, et nous êtes bon pour aller.rightArrowParents.unshift()
plutôt quepush()
etreverse()
?Ici est un natif JS version qui renvoie un jQuery chemin. Je suis aussi d'ajouter des Id pour les éléments s'ils en ont. Ce serait vous donner la possibilité de faire le chemin le plus court si vous voyez un id dans le tableau.
Sorties
Ici est la fonction.
J'avais besoin d'un natif JS version, qui renvoie CSS chemin d'accès standard (pas de jQuery), et traite avec ShadowDOM. Ce code est une mise à jour mineure sur Michael Connor réponse, juste au cas où quelqu'un d'autre en a besoin:
Voici une solution pour la correspondance exacte d'un élément.
Il est important de comprendre que le sélecteur de (il n'est pas réel) que le chrome outils de montrer de ne pas identifier de manière unique un élément dans le DOM. (par exemple, il ne fera pas de distinction entre une liste d'consécutives
span
éléments. il n'y a pas de positionnement, indexation info)Une adaptation d'un similaire (sur xpath) répondre
Et vous pouvez l'utiliser comme cette
Démo à http://jsfiddle.net/gaby/zhnr198y/
J'ai déménagé l'extrait de T. J. Crowder à un petit Plugin jQuery. J'ai utilisé la version jQuery de lui, même s'il est vrai que c'est totalement inutile dessus, mais je ne l'utilise que pour le débogage but donc je n'ai pas de soins.
Utilisation:
Html
Javascript
Référentiel
https://bitbucket.org/tehrengruber/jquery.dom.path
bonjour cette fonction de résoudre le bug lié à l'élément en cours s'affiche pas dans le chemin
vérifier ce maintenant
où
$j
= jQuery Variableégalement résoudre le problème avec .. au nom de la classe
ici est de remplacer la fonction :
Grâce
.replace(' ', '.', 'g')
: JavaScript Standard a pas de troisième paramètre sur laString.prototype.replace
fonction; voir la section 15.5.4.11 de spécifications. Vous souhaitez.replace(/ /g, '.')
à la place.