Réponses
Trop de publicités?
Ok, donc dans un commentaire ci-dessus la question asker Fidilip a dit que ce qu'il/elle est vraiment après c'est pour obtenir le chemin d'accès à l'élément courant.
Voici un script qui va "monter" le DOM ancêtre de l'arbre, et ensuite construire assez précis sélecteur y compris tout id ou class attributs de l'élément cliqué.
Le voir travailler sur jsFiddle: http://jsfiddle.net/Jkj2n/56/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("*").click(function() {
var selector = $(this).parents()
.map(function() { return this.tagName; })
.get().reverse().join(" ");
if (selector) {
selector += " "+ $(this)[0].nodeName;
}
var id = $(this).attr("id");
if (id) {
selector += "#"+ id;
}
var classNames = $(this).attr("class");
if (classNames) {
selector += "." + $.trim(classNames).replace(/\s/gi, ".");
}
alert(selector);
return false;
});
});
</script>
</head>
<body>
<h1><span>I love</span> jQuery</h1>
<div>
<p>It's the <strong>BEST THING</strong> ever</p>
<button id="myButton">Button test</button>
</div>
<ul>
<li>Item one
<ul>
<li id="sub2" >Sub one</li>
<li id="sub2" class="subitem otherclass">Sub two</li>
</ul>
</li>
</ul>
</body>
</html>
Par exemple, si vous cliquez sur le 2ème de la liste imbriquée élément de la liste dans le code HTML ci-dessous, vous obtenez le résultat suivant:
HTML BODY UL LI UL LI#sub2.subitem.otherclass
AVERTISSEMENT .sélecteur de version obsolète: 1.7, supprimé: 1.9
L'objet jQuery possède un sélecteur de propriété que j'ai vu en fouillant dans son code hier. Ne sais pas si c'est défini dans les docs sont de façon fiable, il est (pour vérification). Mais ça fonctionne!
$('*').selector // returns *
Edit: Si vous trouvez le sélecteur à l'intérieur de l'événement, l'information devrait idéalement faire partie de l'événement lui-même et non pas l'élément, parce qu'un élément peut avoir plusieurs cliquez sur événements affectés par les différents sélecteurs. Une solution serait d'utiliser un wrapper autour de bind(), click() etc. pour ajouter des événements au lieu de les ajouter directement.
jQuery.fn.addEvent = function(type, handler) {
this.bind(type, {'selector': this.selector}, handler);
};
Le sélecteur est passé comme une propriété de l'objet nommé selector. Accéder en tant que event.data.selector.
Nous allons l'essayer sur certains de balisage (http://jsfiddle.net/DFh7z/):
<p class='info'>some text and <a>a link</a></p>
$('p a').addEvent('click', function(event) {
alert(event.data.selector); // p a
});
Avertissement: n'oubliez pas que, tout comme avec live() événements, le sélecteur de propriété peut être invalide si DOM traversée de méthodes sont utilisées.
<div><a>a link</a></div>
Le code ci-dessous ne fonctionnera PAS, que live s'appuie sur le sélecteur de la propriété
qui dans ce cas est - a.parent() - une défaillance de sélecteur.
$('a').parent().live(function() { alert('something'); });
Notre addEvent méthode de feu, mais vous aussi, vous allez voir le mauvais sélecteur - a.parent().
http://www.selectorgadget.com/ est un bookmarklet conçu explicitement pour ce cas d’utilisation.
Cela dit, je suis d’accord avec la plupart des gens que vous devriez juste apprendre vous-même des sélecteurs CSS, essayant de les générer avec le code n’est pas durable. :)
