How can I get selector from jQuery object

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

Is there an easy way to get selector from $(this)? There is a way to select an element by its selector, but what about getting the selector from element?

112385 次浏览
小开

是否尝试获取被单击的当前标记的名称？

如果是这样，这样做. 。

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

你不能真正得到“选择器”，在你的例子中“选择器”是 *。

小开

这个怎么样:

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

我不认为 jQuery 存储了所使用的选择器文本。毕竟，如果你做了这样的事情，那会怎么样呢:

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

::WARNING::
.selector has been deprecated as of version 1.7, removed as of 1.9

JQuery 对象有一个选择器属性，我在昨天深入挖掘它的代码时看到过。不知道文档中是否定义了它的可靠性(为了将来的证明)。但是很有效！

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

编辑 : 如果您要在事件中找到选择器，那么该信息理想情况下应该是事件本身的一部分，而不是元素，因为一个元素可以通过不同的选择器分配多个 click 事件。解决方案是在 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'); });

Our addEvent method will fire, but you too will see the wrong selector - a.parent().

小开

在问题提问者 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 中单击第2个列表嵌套列表项，您将得到以下结果:

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

小开

http://www.selectorgadget.com/ is a bookmarklet designed explicitly for this use case.

也就是说，我同意大多数其他人的观点，你应该自己学习 CSS 选择器，尝试用代码生成它们是不可持续的。:)

小开

Did you try this ? 

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

I added some fixes to @jessegavin's fix.

This will return right away if there is an ID on the element. I also added a name attribute check and a nth-child selector in case a element has no id, class, or name.

名称可能需要范围界定，以防页面上有多个表单并具有相似的输入，但我还没有处理这个问题。

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

通过与@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>

Fiddle w/QUnit 测试

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

小开

同样的 Javascript 代码，如果任何人需要的话，就像我需要它一样。这只是上述选定答案的翻译。

    <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>
小开

我已经发布了一个 jQuery 插件: jQuery Selectorator，你可以得到这样的选择器。

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

即使在上述解决方案之后，我还是得到了多个元素，所以我扩展了 dds1024的工作，以获得更多的针对 dom 元素。

e.g. 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;
}
小开

考虑到这里读到的一些答案，我想提出以下建议:

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

也许对创建 jQuery 插件有用？

小开

试试这个:

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

这不会显示 DOM 路径，但是它会输出一个字符串表示，表示在查看对象时在 chrome 调试器中看到的内容。

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

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

小开

这可以得到你点击 HTML 元素的选择器路径-

 $("*").on("click", function() {


let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");


alert(selectorPath);


return false;


});
小开

我写了这个简单的 jQuery 插件。

这将检查 id 或类名，并尝试给出尽可能精确的选择器。

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

Just add a layer over the $ function this way:

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

现在您可以执行类似 

$(“ a”) . 选择器
的操作，并且即使在较新的 jQuery 版本上也将返回“ a”。

小开

最好的答案是

var selector = '#something';


$(selector).anything(function(){
console.log(selector);
});
小开

谢谢你 P1nox！

我的问题是将焦点放回修改表单的一部分的 ajax 调用上。

$.ajax({  url : "ajax_invite_load.php",
async : true,
type : 'POST',
data : ...
dataType : 'html',
success : function(html, statut) {
var focus = $(document.activeElement).getSelector();
$td_left.html(html);
$(focus).focus();
}
});

我只需要把你的函数封装在一个 jQuery 插件中:

    !(function ($, undefined) {


$.fn.getSelector = function () {
if (!this || !this.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 = this.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 += ' ' + this[0].nodeName +
// get child selector from element ifself
_getChildSelector(this.index());
}


selector += _getIdAndClassNames(this);


return selector;
}


})(window.jQuery);

提交答案