$("*").click(function(){
$(this); // how can I get selector from $(this) ?
});
有没有一种简单的方法可以从中获取选择器$(this)？有一种方法可以通过它的选择器选择一个元素，但是从 element 获取选择器呢？
如何从 jQuery 对象获取选择器
IT技术
javascript
jquery
jquery-selectors
tree-traversal
2021-02-02 06:08:41
6个回答
好的，所以在问题提问者上方的评论中，Fidilip他/她真正想要的是获取当前元素的路径。
这是一个脚本，它将“爬升”DOM 祖先树，然后构建相当具体的选择器，包括单击的项目上的任何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
::WARNING::
.selector 已从 1.7 版开始弃用，从 1.9 版开始删除
我昨天在挖掘其代码时看到了 jQuery 对象有一个选择器属性。不知道文档中是否定义了它的可靠性（以备将来证明）。但它有效！
$('*').selector // returns *
编辑：如果您要在事件中找到选择器，那么理想情况下该信息应该是事件本身的一部分，而不是元素的一部分，因为一个元素可以通过各种选择器分配多个单击事件。一种解决方案是使用一个包装周围bind()，click()等等，而不是直接添加将它添加的事件。
jQuery.fn.addEvent = function(type, handler) {
this.bind(type, {'selector': this.selector}, handler);
};
选择器作为对象的名为 的属性传递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); // p a
});
免责声明：请记住，就像live()事件一样，如果使用 DOM 遍历方法，选择器属性可能无效。
<div><a>a link</a></div>
下面的代码将不起作用，因为它live依赖于选择器属性，在这种情况下是a.parent()- 一个无效的选择器。
$('a').parent().live(function() { alert('something'); });
我们的addEvent方法会触发，但您也会看到错误的选择器 - 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>
小提琴与 QUnit 测试
你试过这个吗？
$("*").click(function(){
$(this).attr("id");
});
试试这个：
$("*").click(function(event){
console.log($(event.handleObj.selector));
});
其它你可能感兴趣的问题