我怎样才能从jQuery对象中获得select器？
$("*").click(function(){ $(this); // how can I get selector from $(this) ? }); 有一个简单的方法来从$(this)获得select器吗？ 有一种方法可以通过select器来select一个元素，但是如何从元素中select元素呢？
好的，所以在上面的评论中，提问者Fidilip说，他/她真正要做的是获得当前元素的path。
这是一个脚本，它将“爬”DOM祖先树，然后build立相当具体的select器，包括点击项目上的任何id或class属性。
看到它工作在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>
例如，如果您要在下面的HTML中单击第二个列表嵌套列表项，则会得到以下结果：
HTML>BODY>UL>LI>UL>LI#sub2.subitem.otherclass
：：警告：：
.selector从版本1.7开始已被弃用，从1.9版中删除
jQuery对象有一个select器属性，我昨天在其代码中挖掘时看到。 不知道是否在文档中定义它是多么可靠（为了将来的打样）。 但它的作品！
$('*').selector // returns *
编辑 ：如果你想在事件内部findselect器，那么这个信息应该是事件本身的一部分，而不是元素，因为一个元素可以通过不同的select器分配多个点击事件。 一个解决scheme是使用一个包装bind() ， click()等来添加事件，而不是直接添加它。
jQuery.fn.addEvent = function(type, handler) { this.bind(type, {'selector': this.selector}, handler); };
select器作为名为selector的对象的属性被传递。 作为event.data.selector访问它。
让我们尝试一些标记（ 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 });
免责声明 ：请记住，就像使用live()事件一样，如果使用DOM遍历方法，selector属性可能无效。
<div><a>a link</a></div>
下面的代码将a.parent()正常工作，因为live依赖于select器属性，在这种情况下是a.parent() – 一个无效的select器。
$('a').parent().live(function() { alert('something'); });
我们的addEvent方法会触发，但你也会看到错误的select器 – a.parent() 。
与@drzaus合作，我们提出了以下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 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
// 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)
用法和窍门
<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>
小提琴w / QUnittesting
你试过这个吗？
$("*").click(function(){ $(this).attr("id"); });
我已经发布了一个jQuery插件： jQuery Selectorator ，你可以得到像这样的select器。
$("*").on("click", function(){ alert($(this).getSelector().join("\n")); return false; });
尝试这个：
$("*").click(function(event){ console.log($(event.handleObj.selector)); });
你是否想要获取被点击的当前标签的名称？
如果是的话，就这样做
$("*").click(function(){ alert($(this)[0].nodeName); });
你不能真正得到“select器”，你的案例中的“select器”是* 。
http://www.selectorgadget.com/是一个为此用例明确devise的书签。;
也就是说，我同意其他大多数人的看法，你应该自己学习CSSselect器，试图用代码生成CSSselect器是不可持续的。 🙂
我在@ jessegavin的修复中添加了一些修复。
如果元素上有ID，这将立即返回。 我还添加了一个名称属性检查和一个nth-childselect器，以防元素没有id，class或name。
如果页面上有多个表单并且有相似的input，名称可能需要作用域，但是我还没有处理。
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; }
即使在上述解决scheme之后，我也得到了多个元素，所以我扩展了dds1024的工作方式，以获得更多的指向dom元素。
例如DIV：第n孩子（1）DIV：第n孩子（3）DIV：第n孩子（1）第n孩子（1）DIV：第n孩子（1）DIV：第n孩子（8）DIV （2）DIV：第n孩子（1）DIV：第n孩子（2）DIV：第n孩子（1）H4：第n孩子（2）
码：
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; }
这可以让你selectHTML元素的path –
$("*").on("click", function() { let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->"); alert(selectorPath); return false; });
怎么样：
var selector = "*" $(selector).click(function() { alert(selector); });
我不相信jQuery存储使用的select器文本。 毕竟，如果你做了这样的事情，那将如何工作：
$("div").find("a").click(function() { // what would expect the 'selector' to be here? });
Javascript代码相同，以防万一需要，因为我需要它。 这只是上面select的答案的翻译。
<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>
考虑到一些在这里阅读的答案，我想提出这样的build议：
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; }
也许有用的创build一个jQuery插件？
这不会显示你的DOMpath，但它会输出一个string表示forms，例如在查看一个对象时，例如在Chromedebugging器中看到的内容。
$('.mybtn').click( function(event){ console.log("%s", this); // output: "button.mybtn" });
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
那么，我写了这个简单的jQuery插件。
这将检查id或类的名称，并尝试尽可能多的确切select器。
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; }
只需在$函数中添加一个图层即可：
$ = (function(jQ) { return (function() { var fnc = jQ.apply(this,arguments); fnc.selector = (arguments.length>0)?arguments[0]:null; return fnc; }); })($);
