Como posso obter selector do object jQuery

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

Existe uma maneira fácil de obter seletor de $(this) ? Existe uma maneira de selecionar um elemento pelo seu seletor, mas que tal obter o seletor do elemento ?

Ok, então, em um comentário acima da pergunta, Fidilip disse que o que ele realmente quer é pegar o caminho para o elemento atual.

Aqui está um script que “escalará” a tree ancestral do DOM e, em seguida, criará um seletor bastante específico, incluindo qualquer atributo de id ou class no item clicado.

Veja-o trabalhando no jsFiddle: http://jsfiddle.net/Jkj2n/209/

 < !DOCTYPE html>       

I love jQuery

It's the BEST THING ever

  • Item one
    • Sub one
    • Sub two

Por exemplo, se você clicasse no item da lista aninhada na segunda lista no HTML abaixo, você obteria o seguinte resultado:

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

::ATENÇÃO::
.selector foi preterido a partir da versão 1.7, removido a partir de 1.9

O object jQuery tem uma propriedade de seletor que vi ao procurar seu código ontem. Não sei se é definido nos documentos como é confiável (para provas futuras). Mas funciona!

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

Edit : Se você tivesse que encontrar o seletor dentro do evento, essa informação deveria idealmente ser parte do evento em si e não do elemento, porque um elemento poderia ter vários events de cliques atribuídos através de vários seletores. Uma solução seria usar um wrapper em torno de bind() , click() etc. para adicionar events em vez de adicioná-lo diretamente.

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

O seletor está sendo passado como a propriedade de um object denominada selector . Acesse como event.data.selector .

Vamos tentar em alguma marcação ( http://jsfiddle.net/DFh7z/ ):

 

some text and a link

​ $('p a').addEvent('click', function(event) { alert(event.data.selector); // pa });

Isenção de responsabilidade : Lembre-se de que, assim como acontece com os events live() , a propriedade do seletor pode ser inválida se os methods de passagem DOM são usados.

  

O código abaixo NÃO funcionará, já que o live depende da propriedade do seletor, que neste caso é a.parent() – um seletor inválido.

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

Nosso método addEvent será a.parent() , mas você também verá o seletor errado – a.parent() .

Em colaboração com a @drzaus, criamos o seguinte plugin jQuery.

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 classs = element.className.split(' '); for (var i in classs) { if (classs.hasOwnProperty(i) && classs[i]) { pieces.unshift(classs[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 reduzido

 // 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) 

Uso e Pegadinhas

  ...   

Welcome

Fiddle w / testes QUnit

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

Você tentou isso?

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

Eu lancei um plugin jQuery: jQuery Selectorator , você pode obter seletor como este.

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

Tente isto:

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

Você está tentando obter o nome da tag atual que foi clicada?

Se assim for, faça isso ..

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

Você não pode realmente pegar o “seletor”, o “seletor” no seu caso é * .

http://www.selectorgadget.com/ é um bookmarklet projetado explicitamente para este caso de uso.

Dito isso, concordo com a maioria das outras pessoas em que você deve aprender sozinho os seletores de CSS, tentando gerá-los com código não é sustentável. 🙂

Eu adicionei algumas correções à correção do @jessegavin.

Isso retornará imediatamente se houver um ID no elemento. Eu também adicionei uma verificação de atributo de nome e um seletor n-filho no caso de um elemento não ter identificação, class ou nome.

O nome pode precisar de definição de escopo no caso de haver vários formulários na página e ter inputs semelhantes, mas eu não lidei com isso ainda.

 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; } 

Eu estava recebendo vários elementos, mesmo após as soluções acima, então eu estendi o trabalho dds1024, para ainda mais elemento dom pin-apontando.

por exemplo DIV: nth-child (1) DIV: nth-child (3) DIV: nth-child (1) ARTIGO: nth-child (1) DIV: nth-child (1) DIV: n-filho (8) DIV : n-filho (2) DIV: n-filho (1) DIV: n-filho (2) DIV: n-filho (1) H4: n-filho (2)

Código:

 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; } 

Isso pode obter o caminho do seletor de elementos HTML clicados

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

Código Javascript para o mesmo, no caso de alguém precisar, como eu precisava. Isso é apenas a tradução da resposta selecionada acima.

   

Levando em conta algumas respostas leia aqui eu gostaria de propor isto:

 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; } 

Talvez seja útil criar um plugin jQuery?

Isso não mostrará o caminho do DOM, mas gerará uma representação de string do que você vê, por exemplo, no depurador do chrome, ao visualizar um object.

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

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

Bem, eu escrevi este simples plugin jQuery.

Isso verifica o id ou o nome da class e tenta fornecer o máximo possível de seletor.

 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; } 

Basta adicionar uma camada sobre a function $ desta maneira:

 $ = (function(jQ) { return (function() { var fnc = jQ.apply(this,arguments); fnc.selector = (arguments.length>0)?arguments[0]:null; return fnc; }); })($); 

E se:

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

Eu não acredito que o jQuery armazene o texto do seletor que foi usado. Afinal, como isso funcionaria se você fizesse algo assim:

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

A melhor resposta seria

 var selector = '#something'; $(selector).anything(function(){ console.log(selector); });