Comment puis-je obtenir un sélecteur à partir de l'objet jQuery?

$("*").click(function(){ $(this); // how can I get selector from $(this) ? }); 

Existe-t-il un moyen simple d' obtenir un sélecteur de $(this) ? Il existe un moyen de sélectionner un élément par son sélecteur, mais que diriez-vous d'obtenir le sélecteur de l'élément ?

D'accord, alors dans un commentaire au-dessus de la question, le responsable Fidilip dit que ce qu'il / elle a vraiment fait est d'obtenir le chemin vers l'élément actuel.

Voici un script qui "grimpera" l'arbre ancêtre DOM, puis construire un sélecteur assez spécifique, y compris les attributs d' id ou de class sur l'élément cliqué.

Voyez-le travailler sur jsFiddle: http://jsfiddle.net/Jkj2n/209/

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { $("*").on("click", function(e) { e.preventDefault(); var selector = $(this) .parents() .map(function() { return this.tagName; }) .get() .reverse() .concat([this.nodeName]) .join(">"); var id = $(this).attr("id"); if (id) { selector += "#"+ id; } var classNames = $(this).attr("class"); if (classNames) { selector += "." + $.trim(classNames).replace(/\s/gi, "."); } alert(selector); }); }); </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 deviez cliquer sur l'élément de liste niché de la 2ème liste dans le code HTML ci-dessous, vous obtiendriez le résultat suivant:

HTML>BODY>UL>LI>UL>LI#sub2.subitem.otherclass

::ATTENTION::
.selector a été obsolète à partir de la version 1.7, supprimé à partir de 1.9

L'objet jQuery a une propriété de sélection que j'ai vu lors de la navigation dans son code hier. Ne sait pas si elle est définie dans les documents sont fiables (pour les épreuves futures). Mais ça marche!

 $('*').selector // returns * 

Modifier : Si vous trouviez le sélecteur à l'intérieur de l'événement, cette information devrait idéalement faire partie de l'événement lui-même et non l'élément car un élément pourrait avoir plusieurs événements de clic assignés à différents sélecteurs. Une solution serait d'utiliser un wrapper vers bind() , click() etc. pour ajouter des événements au lieu de l'ajouter directement.

 jQuery.fn.addEvent = function(type, handler) { this.bind(type, {'selector': this.selector}, handler); }; 

Le sélecteur passe en tant que propriété d'objet nommée selector . Accédez-le comme event.data.selector .

Essayons un 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); // pa }); 

Disclaimer : Rappelez-vous que tout comme pour live() événements live() , la propriété sélecteur peut être invalide si les méthodes de déplacement DOM sont utilisées.

 <div><a>a link</a></div> 

Le code ci-dessous NE fonctionnera PAS, car il dépend de la propriété du sélecteur qui, dans ce cas, est a.parent() – un sélecteur invalide.

 $('a').parent().live(function() { alert('something'); }); 

Notre méthode addEvent déclenchera, mais vous verrez également le mauvais sélecteur – a.parent() .

En collaboration avec @drzaus, nous avons proposé le plugin jQuery suivant.

JQuery.getSelector

 !(function ($, undefined) { /// adapted http://jsfiddle.net/drzaus/Hgjfh/5/ var get_selector = function (element) { var pieces = []; for (; element && element.tagName !== undefined; element = element.parentNode) { if (element.className) { var classes = element.className.split(' '); for (var i in classes) { if (classes.hasOwnProperty(i) && classes[i]) { pieces.unshift(classes[i]); pieces.unshift('.'); } } } if (element.id && !/\s/.test(element.id)) { pieces.unshift(element.id); pieces.unshift('#'); } pieces.unshift(element.tagName); pieces.unshift(' > '); } return pieces.slice(1).join(''); }; $.fn.getSelector = function (only_one) { if (true === only_one) { return get_selector(this[0]); } else { return $.map(this, function (el) { return get_selector(el); }); } }; })(window.jQuery); 

Javascript minifié

 // http://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object/15623322#15623322 !function(e,t){var n=function(e){var n=[];for(;e&&e.tagName!==t;e=e.parentNode){if(e.className){var r=e.className.split(" ");for(var i in r){if(r.hasOwnProperty(i)&&r[i]){n.unshift(r[i]);n.unshift(".")}}}if(e.id&&!/\s/.test(e.id)){n.unshift(e.id);n.unshift("#")}n.unshift(e.tagName);n.unshift(" > ")}return n.slice(1).join("")};e.fn.getSelector=function(t){if(true===t){return n(this[0])}else{return e.map(this,function(e){return n(e)})}}}(window.jQuery) 

Utilisation et Gotchas

 <html> <head>...</head> <body> <div id="sidebar"> <ul> <li> <a href="/" id="home">Home</a> </li> </ul> </div> <div id="main"> <h1 id="title">Welcome</h1> </div> <script type="text/javascript"> // Simple use case $('#main').getSelector(); // => 'HTML > BODY > DIV#main' // If there are multiple matches then an array will be returned $('body > div').getSelector(); // => ['HTML > BODY > DIV#main', 'HTML > BODY > DIV#sidebar'] // Passing true to the method will cause it to return the selector for the first match $('body > div').getSelector(true); // => 'HTML > BODY > DIV#main' </script> </body> </html> 

Fiddle w / QUnit tests

http://jsfiddle.net/CALY5/5/

Avez-vous essayé ceci?

  $("*").click(function(){ $(this).attr("id"); }); 

J'ai sorti un plugin jQuery: jQuery Selectorator , vous pouvez obtenir un sélecteur comme celui-ci.

 $("*").on("click", function(){ alert($(this).getSelector().join("\n")); return false; }); 

Essaye ça:

 $("*").click(function(event){ console.log($(event.handleObj.selector)); }); 

Essayez-vous d'obtenir le nom de la balise actuelle qui a été cliquée?

Si oui, faites ceci …

 $("*").click(function(){ alert($(this)[0].nodeName); }); 

Vous ne pouvez pas vraiment obtenir le «sélecteur», le «sélecteur» dans votre cas est * .

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 autres personnes en ce sens que vous devriez simplement apprendre les sélecteurs CSS vous-même, essayer de les générer avec un code n'est pas durable. 🙂

J'ai ajouté quelques corrections à la correction de @ jessegavin.

Cela renverra tout de suite s'il existe un identifiant sur l'élément. J'ai également ajouté une vérification des attributs de nom et un sélecteur n-enfant dans le cas où un élément n'a pas d'identifiant, de classe ou de nom.

Le nom pourrait avoir besoin d'une portée dans le cas où il existe plusieurs formes sur la page et ont des entrées similaires, mais je n'ai pas encore manipulé.

 function getSelector(el){ var $el = $(el); var id = $el.attr("id"); if (id) { //"should" only be one of these if theres an ID return "#"+ id; } var selector = $el.parents() .map(function() { return this.tagName; }) .get().reverse().join(" "); if (selector) { selector += " "+ $el[0].nodeName; } var classNames = $el.attr("class"); if (classNames) { selector += "." + $.trim(classNames).replace(/\s/gi, "."); } var name = $el.attr('name'); if (name) { selector += "[name='" + name + "']"; } if (!name){ var index = $el.index(); if (index) { index = index + 1; selector += ":nth-child(" + index + ")"; } } return selector; } 

J'avais des éléments multiples même après des solutions ci-dessus, donc j'ai étendu le travail dds1024, pour encore plus d'élément dom pointu.

P.ex. DIV: nth-child (1) DIV: nth-child (3) DIV: nth-child (1) ARTICLE: nth-child (1) DIV: nth-child (1) DIV: nth-child (8) DIV : Nth-child (2) DIV: nth-child (1) DIV: nth-child (2) DIV: nth-child (1) H4: nth-child (2)

Code:

 function getSelector(el) { var $el = jQuery(el); var selector = $el.parents(":not(html,body)") .map(function() { var i = jQuery(this).index(); i_str = ''; if (typeof i != 'undefined') { i = i + 1; i_str += ":nth-child(" + i + ")"; } return this.tagName + i_str; }) .get().reverse().join(" "); if (selector) { selector += " "+ $el[0].nodeName; } var index = $el.index(); if (typeof index != 'undefined') { index = index + 1; selector += ":nth-child(" + index + ")"; } return selector; } 

Cela peut vous permettre de sélectionner le chemin d'accès de l'élément HTML cliqué –

  $("*").on("click", function() { let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->"); alert(selectorPath); return false; }); 

Que diriez-vous:

 var selector = "*" $(selector).click(function() { alert(selector); }); 

Je ne crois pas que jQuery stocke le texte du sélecteur qui a été utilisé. Après tout, comment cela fonctionnerait si vous avez fait quelque chose comme ceci:

 $("div").find("a").click(function() { // what would expect the 'selector' to be here? }); 

Code Javascript pour le même, au cas où quelqu'un en aurait besoin, comme je l'avais besoin. Ce n'est que la traduction de la réponse sélectionnée ci-dessus.

  <script type="text/javascript"> function getAllParents(element){ var a = element; var els = []; while (a && a.nodeName != "#document") { els.unshift(a.nodeName); a = a.parentNode; } return els.join(" "); } function getJquerySelector(element){ var selector = getAllParents(element); /* if(selector){ selector += " " + element.nodeName; } */ var id = element.getAttribute("id"); if(id){ selector += "#" + id; } var classNames = element.getAttribute("class"); if(classNames){ selector += "." + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, "."); } console.log(selector); alert(selector); return selector; } </script> 

En tenant compte de certaines réponses, lisez ici, je voudrais proposer ceci:

 function getSelectorFromElement($el) { if (!$el || !$el.length) { return ; } function _getChildSelector(index) { if (typeof index === 'undefined') { return ''; } index = index + 1; return ':nth-child(' + index + ')'; } function _getIdAndClassNames($el) { var selector = ''; // attach id if exists var elId = $el.attr('id'); if(elId){ selector += '#' + elId; } // attach class names if exists var classNames = $el.attr('class'); if(classNames){ selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.'); } return selector; } // get all parents siblings index and element's tag name, // except html and body elements var selector = $el.parents(':not(html,body)') .map(function() { var parentIndex = $(this).index(); return this.tagName + _getChildSelector(parentIndex); }) .get() .reverse() .join(' '); if (selector) { // get node name from the element itself selector += ' ' + $el[0].nodeName + // get child selector from element ifself _getChildSelector($el.index()); } selector += _getIdAndClassNames($el); return selector; } 

Peut-être utile de créer un plugin jQuery?

Cela ne vous montrera pas le chemin DOM, mais il affichera une représentation de chaîne de ce que vous voyez dans par exemple un débogueur Chrome, lors de la visualisation d'un objet.

 $('.mybtn').click( function(event){ console.log("%s", this); // output: "button.mybtn" }); 

https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object

Eh bien, j'ai écrit ce simple plugin jQuery.

Cela vérifie l'identifiant ou le nom de la classe et essaie de donner autant de sélecteurs exacts que possible.

 jQuery.fn.getSelector = function() { if ($(this).attr('id')) { return '#' + $(this).attr('id'); } if ($(this).prop("tagName").toLowerCase() == 'body') return 'body'; var myOwn = $(this).attr('class'); if (!myOwn) { myOwn = '>' + $(this).prop("tagName"); } else { myOwn = '.' + myOwn.split(' ').join('.'); } return $(this).parent().getSelector() + ' ' + myOwn; } 

Vous pouvez chaîner les commandes, par exemple:

 $(this).$("a").css("display", "none"); 

Cela cacherait tous les liens sur lesquels les descendants de l'élément ont été cliqué.

Mais pourquoi souhaitez-vous ajouter un événement de type 'clic' sur CHAQUE élément de votre page html?