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

javascript jquery jquery-selectors tree-traversal

2022-08-30 05:19:09

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

有没有一种简单的方法可以从$（this）中获取选择器？有一种方法可以通过其选择器选择元素，但是从元素中获取选择器呢？

答案 1

好吧，所以在上面的评论中，提问者说他/她真正追求的是获得当前元素的路径。Fidilip

下面是一个脚本，它将“爬升”DOM 祖先树，然后构建相当具体的选择器，包括单击的项目上的任何属性。idclass

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

答案 2

：：警告：：
.selector 自版本 1.7 起已弃用，自 1.9 起已被删除

jQuery 对象有一个选择器属性，我昨天在挖掘其代码时看到。不知道文档中是否定义了它是否可靠（用于将来的校对）。但它有效！

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

编辑：如果要在事件内找到选择器，则该信息最好是事件本身的一部分，而不是元素的一部分，因为一个元素可以通过各种选择器分配多个点击事件。一种解决方案是使用 wrapper to around 等来添加事件，而不是直接添加它。bind()click()

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

选择器作为名为的对象属性传递。以 .selectorevent.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
});

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

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

下面的代码将不起作用，因为依赖于选择器属性，在这种情况下是 - 无效的选择器。livea.parent()

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

我们的方法会触发，但你也会看到错误的选择器 - 。addEventa.parent()

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

：：警告：： .selector 自版本 1.7 起已弃用，自 1.9 起已被删除

：：警告：：
.selector 自版本 1.7 起已弃用，自 1.9 起已被删除