如何从jQuery对象获取选择器?

时间：2022-10-20 21:12:34
$("*").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?

是否有一个简单的方法从$(this)获得选择器?有一种方法可以通过它的选择器选择一个元素，但是如何从元素中获取选择器呢?

18 个解决方案

#1

51  

Ok, so in a comment above the question asker Fidilip said that what he/she's really after is to get the path to the current element.

好的，在上面的评论中，asker Fidilip说他/她真正想要的是找到当前元素的路径。

Here's a script that will "climb" the DOM ancestor tree and then build fairly specific selector including any id or class attributes on the item clicked.

这里有一个脚本，它将“爬爬”DOM祖先树，然后构建一个相当特定的选择器，包括所单击项目上的任何id或类属性。

See it working on jsFiddle: http://jsfiddle.net/Jkj2n/209/

查看它在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>

For example, if you were to click the 2nd list nested list item in the HTML below, you would get the following result:

例如，如果您在下面的HTML中单击第2个列表嵌套列表项，您将得到以下结果:

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

李HTML >身体> UL > > UL >李# sub2.subitem.otherclass

#2

27  

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

The jQuery object has a selector property I saw when digging in its code yesterday. Don't know if it's defined in the docs are how reliable it is (for future proofing). But it works!

jQuery对象有一个选择器属性，我昨天在它的代码中看到它。不知道在文档中是否定义了它的可靠性(为了以后的验证)。但它工作!

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

Edit: If you were to find the selector inside the event, that information should ideally be part of the event itself and not the element because an element could have multiple click events assigned through various selectors. A solution would be to use a wrapper to around bind(), click() etc. to add events instead of adding it directly.

编辑:如果你在事件中找到了选择器，那么信息应该是事件本身的一部分，而不是元素，因为元素可以有多个通过不同选择器分配的事件。解决方案是使用包装器来绕过bind()、click()等，以添加事件，而不是直接添加事件。

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

The selector is being passed as an object's property named selector. Access it as event.data.selector.

选择器作为对象的属性选择器传递。作为event.data.selector访问它。

Let's try it on some markup (http://jsfiddle.net/DFh7z/):

让我们尝试一些标记(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
});

Disclaimer: Remember that just as with live() events, the selector property may be invalid if DOM traversal methods are used.

声明:请记住，与live()事件一样，如果使用DOM遍历方法，选择器属性可能无效。

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

The code below will NOT work, as live relies on the selector property which in this case is a.parent() - an invalid selector.

下面的代码将不起作用，因为live依赖于选择器属性，在本例中是a.parent()——一个无效的选择器。

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

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

我们的addEvent方法将会触发，但是您也会看到错误的选择器- a.parent()。

#3

21  

In collaboration with @drzaus we've come up with the following jQuery plugin.

在与@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);

Minified Javascript

// http://*.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)

Usage and 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/

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

#4

5  

Did you try this ?

你试过这个吗?

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

#5

2  

I've released a jQuery plugin: jQuery Selectorator, you can get selector like this.

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

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

#6

2  

Try this:

试试这个:

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

#7

1  

Are you trying to get the name of the current tag that was clicked?

您是否正在尝试获取被单击的当前标记的名称?

If so, do this..

如果是这样,这样做. .

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

You can't really get the "selector", the "selector" in your case is *.

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

#8

1  

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

为这个用例明确设计了一个bookmarklet。

That said, I agree with most other people in that you should just learn CSS selectors yourself, trying to generate them with code is not sustainable. :)

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

#9

1  

I added some fixes to @jessegavin's fix.

我给@jessegavin的修复添加了一些补丁。

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.

如果元素上有ID，这将立即返回。我还添加了一个name属性检查和一个nth-子选择器，以防元素没有id、类或名称。

The name might need scoping in case there a multiple forms on the page and have similar inputs, but I didn't handle that yet.

如果页面上有多个表单，并且有相似的输入，那么这个名称可能需要确定，但是我还没有处理。

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

#10

1  

I was getting multiple elements even after above solutions, so i extended dds1024 work, for even more pin-pointing dom element.

即使在上面的解决方案之后，我也得到了多个元素，所以我扩展了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)

(1)第n -child(1) DIV:第n -child(1) DIV:nth-child(1) DIV:nth-child(1) DIV:nth-child(2) DIV:nth-child(1) DIV:nth-child(2) DIV:nth-child(1):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;
}

#11

1  

This can get you selector path of clicked HTML element-

这可以获得单击HTML元素的选择路径。

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

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

    alert(selectorPath);

    return false;

});

#12

1  

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; 
	});
})($);

Now you can do things like

现在你可以做类似的事情了。

$("a").selector
and will return "a" even on newer jQuery versions.

#13

0  

Javascript code for the same, in case any one needs, as i needed it. This just the translation only of the above selected answer.

同样的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>

#14

0  

Taking in account some answers read here I'd like to propose this:

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

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

Maybe useful to create a jQuery plugin?

创建一个jQuery插件可能有用吗?

#15

0  

This won't show you the DOM path, but it will output a string representation of what you see in eg chrome debugger, when viewing an object.

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

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

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

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

#16

0  

Well, I wrote this simple jQuery plugin.

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

This checkes id or class name, and try to give as much exact selector as possible.

这个checkes 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;
}

#17

-1  

How about:

如何:

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

I don't believe jQuery store the selector text that was used. After all, how would that work if you did something like this:

我不相信jQuery存储了使用的选择器文本。毕竟，如果你做了这样的事情，你会怎么做呢?

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

#18

-1  

The best answer would be

最好的答案是。

var selector = '#something';

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

#1

51  

Ok, so in a comment above the question asker Fidilip said that what he/she's really after is to get the path to the current element.

好的，在上面的评论中，asker Fidilip说他/她真正想要的是找到当前元素的路径。

Here's a script that will "climb" the DOM ancestor tree and then build fairly specific selector including any id or class attributes on the item clicked.

这里有一个脚本，它将“爬爬”DOM祖先树，然后构建一个相当特定的选择器，包括所单击项目上的任何id或类属性。

See it working on jsFiddle: http://jsfiddle.net/Jkj2n/209/

查看它在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>

For example, if you were to click the 2nd list nested list item in the HTML below, you would get the following result:

例如，如果您在下面的HTML中单击第2个列表嵌套列表项，您将得到以下结果:

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

李HTML >身体> UL > > UL >李# sub2.subitem.otherclass

#2

27  

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

The jQuery object has a selector property I saw when digging in its code yesterday. Don't know if it's defined in the docs are how reliable it is (for future proofing). But it works!

jQuery对象有一个选择器属性，我昨天在它的代码中看到它。不知道在文档中是否定义了它的可靠性(为了以后的验证)。但它工作!

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

Edit: If you were to find the selector inside the event, that information should ideally be part of the event itself and not the element because an element could have multiple click events assigned through various selectors. A solution would be to use a wrapper to around bind(), click() etc. to add events instead of adding it directly.

编辑:如果你在事件中找到了选择器，那么信息应该是事件本身的一部分，而不是元素，因为元素可以有多个通过不同选择器分配的事件。解决方案是使用包装器来绕过bind()、click()等，以添加事件，而不是直接添加事件。

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

The selector is being passed as an object's property named selector. Access it as event.data.selector.

选择器作为对象的属性选择器传递。作为event.data.selector访问它。

Let's try it on some markup (http://jsfiddle.net/DFh7z/):

让我们尝试一些标记(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
});

Disclaimer: Remember that just as with live() events, the selector property may be invalid if DOM traversal methods are used.

声明:请记住，与live()事件一样，如果使用DOM遍历方法，选择器属性可能无效。

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

The code below will NOT work, as live relies on the selector property which in this case is a.parent() - an invalid selector.

下面的代码将不起作用，因为live依赖于选择器属性，在本例中是a.parent()——一个无效的选择器。

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

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

我们的addEvent方法将会触发，但是您也会看到错误的选择器- a.parent()。

#3

21  

In collaboration with @drzaus we've come up with the following jQuery plugin.

在与@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);

Minified Javascript

// http://*.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)

Usage and 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/

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

#4

5  

Did you try this ?

你试过这个吗?

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

#5

2  

I've released a jQuery plugin: jQuery Selectorator, you can get selector like this.

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

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

#6

2  

Try this:

试试这个:

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

#7

1  

Are you trying to get the name of the current tag that was clicked?

您是否正在尝试获取被单击的当前标记的名称?

If so, do this..

如果是这样,这样做. .

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

You can't really get the "selector", the "selector" in your case is *.

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

#8

1  

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

为这个用例明确设计了一个bookmarklet。

That said, I agree with most other people in that you should just learn CSS selectors yourself, trying to generate them with code is not sustainable. :)

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

#9

1  

I added some fixes to @jessegavin's fix.

我给@jessegavin的修复添加了一些补丁。

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.

如果元素上有ID，这将立即返回。我还添加了一个name属性检查和一个nth-子选择器，以防元素没有id、类或名称。

The name might need scoping in case there a multiple forms on the page and have similar inputs, but I didn't handle that yet.

如果页面上有多个表单，并且有相似的输入，那么这个名称可能需要确定，但是我还没有处理。

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

#10

1  

I was getting multiple elements even after above solutions, so i extended dds1024 work, for even more pin-pointing dom element.

即使在上面的解决方案之后，我也得到了多个元素，所以我扩展了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)

(1)第n -child(1) DIV:第n -child(1) DIV:nth-child(1) DIV:nth-child(1) DIV:nth-child(2) DIV:nth-child(1) DIV:nth-child(2) DIV:nth-child(1):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;
}

#11

1  

This can get you selector path of clicked HTML element-

这可以获得单击HTML元素的选择路径。

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

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

    alert(selectorPath);

    return false;

});

#12

1  

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; 
	});
})($);

Now you can do things like

现在你可以做类似的事情了。

$("a").selector
and will return "a" even on newer jQuery versions.

#13

0  

Javascript code for the same, in case any one needs, as i needed it. This just the translation only of the above selected answer.

同样的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>

#14

0  

Taking in account some answers read here I'd like to propose this:

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

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

Maybe useful to create a jQuery plugin?

创建一个jQuery插件可能有用吗?

#15

0  

This won't show you the DOM path, but it will output a string representation of what you see in eg chrome debugger, when viewing an object.

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

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

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

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

#16

0  

Well, I wrote this simple jQuery plugin.

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

This checkes id or class name, and try to give as much exact selector as possible.

这个checkes 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;
}

#17

-1  

How about:

如何:

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

I don't believe jQuery store the selector text that was used. After all, how would that work if you did something like this:

我不相信jQuery存储了使用的选择器文本。毕竟，如果你做了这样的事情，你会怎么做呢?

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

#18

-1  

The best answer would be

最好的答案是。

var selector = '#something';

$(selector).anything(function(){
  console.log(selector);
});
标签：

相关文章