如何从主 jQuery 对象中获取选择器信息？答案

【问题标题】：How to grab the selector info from the main jQuery object?如何从主 jQuery 对象中获取选择器信息？
【发布时间】：2018-03-17 01:06:03
【问题描述】：

这很简单，我们有这条线。我想从以下位置获取信息：

console.log($('#fourth-step tr:nth-child(3) td:nth-child(3)'));

所以输出是#fourth-step tr:nth-child(3) td:nth-child(3)。

这会输出一个很长的对象，但我只需要选择器信息。

我几乎可以肯定某个地方已经有关于这个问题的帖子，但我找不到任何问题，抱歉。

为了让事情变得更简单，列出了我尝试过但没有奏效的方法*。

console.log('z' + {obj});
console.log(JSON.stringify({obj}));
console.log(String({obj});

{ 和 } - 快捷方式。

有什么想法吗？ :)

【问题讨论】：

这已经被问过很多次了，通常是一个 X/Y 问题。不要存储选择器，而是存储创建的 jQuery 对象，或者稍后动态选择您需要的元素。如果您能解释为什么您认为需要这样做，我们将能够提出更好的替代方案。
另外，考虑到这些要求，我根本不明白为什么需要存储选择器。您可以在需要时选择元素。
[对“滥用”CSS 选择器在此处首先导航（？）表格的 DOM 的丑陋默默地笑。 .rows 和 .cells 集合自 DOM 级别 1 以来就已经存在......但是，嘿，今天 $ == JavaScript，我说得对吗？]
@CBroe Hehe :D 我真的不知道这两种方法。谢谢你。 var cell = table.rows[1].cells[1]; 似乎更简单。
当然，这里是一种特殊情况，因为您首先要处理一个表，所以这当然不会转化为许多其他情况，在这些情况下，使用 :nth-child 可能更有意义，而不是尝试在此处使用此方法导航 DOM，在此处使用该属性...此外，如今的浏览器具有高度优化的选择器引擎，因此简单地将纯 JS 的“工作移交”到那里也很有意义。但是井字游戏是一个很好的例子，说明从 HTML 角度来看，使用表格是完全有意义的，所以我不能错过记住一些“老 DOM 朋友”的机会 ;-)

标签： javascript jquery

【解决方案1】：

jQuery 有 .selector() 方法，但由于它不返回 - 有时 - 所需的结果而被弃用。试试我编写的这个 jQuery 插件，以获得更独特的 CSS 选择器：

$.fn.extend({
  getSelector: function() {
    var path = [],
      currentElement = this[0];

    while (currentElement.nodeName.toLowerCase() != 'html') {
      var selector = currentElement.nodeName.toLowerCase();

      if (currentElement.id)
        selector += '#' + currentElement.id;

      if (!currentElement.id && currentElement.className)
        selector += '.' + currentElement.className;

      path.push(selector);

      currentElement = currentElement.parentNode;
    }

    return path.reverse().join(' > ');
  }
});

查看这个 git 存储库：jQuery Plugins Library

【讨论】：

console.log({obj}.getSelector()) 抛出错误Uncaught TypeError: Cannot read property 'nodeName' of undefined。
{obj} 必须是 jQuery 对象，因为这是一个 jQuery 插件。
例如：console.log($('#myElement').getSelector()) 例如返回：div > div#myElement（绝对选择器）。
它是：D console.log($('#fourth-step tr:nth-child(3) td:nth-child(3)').getSelector());。
@lukas-naujokaitis 你的小提琴中没有 HTML 标记。

【解决方案2】：

在 jQuery 1.7 之前，有 selector 属性，但现在已弃用。最好的办法是将选择器存储为元素的属性，如下所示：

$(selector).data('selector',selector)

请注意，在页面中移动或克隆您的元素后，选择器可能不再匹配该元素。这可能是 selector 属性被弃用的原因。

另见here

【讨论】：

它不起作用。给我undefined - jsfiddle.net/y7rzdkao。
我想将 jQuery 版本更改为 1.7 不是一个好主意，对吧？ :) jsfiddle.net/9od8k9xb
selector 应该是一个包含 CSS 选择器的变量
降级本身并没有错，但我不建议这样做。