如何获得元素的唯一选择器[重复]答案

【问题标题】：How to get the unique selector of elements [duplicate]如何获得元素的唯一选择器[重复]
【发布时间】：2013-09-03 00:09:34
【问题描述】：

我正在做一个编辑器，当用户单击 html 文档中的文本或任何内容时，我会对其进行更改并在数据库中记录更改。这是我正在做的一个小部件。因此，这是我的问题。假设我有以下结构的 html 元素：

<html>
  <table>
    <tr>
       <td>Apple</td>
       <td>Pear</td>
    </tr>
    <tr>
      <td>Chicken</td>
      <td>Beef</td>
    </tr>
  </table>
  <div id="one">
       <p>Red</p>
       <p>Orange</p>
  </div>
  <div class="two">
      <p>Green</p>
      <p>Purple</p>
  </div>
  <div class="two">
      <p>Black</p>
      <p>Blue</p>
  </div>
</html>

当用户点击苹果时，唯一路径是（Jquery）：

table:eq(0)>tr:eq(0)>td:eq(1)

假设用户点击红色，唯一路径为（Jquery）：

div#one:eq(o) > p:eq(0)

是否有现成的插件可以唯一地识别选择器？

目前我正在使用这个功能：

function getUniquePath2(node){
                  var parentEls = node.parentsUntil('[id]').add( node.closest('[id]') )
                  .map(function () {
                        return this.tagName + (this.id ? '#' + this.id : "");
                  })
                  .get().join(">");

                  return parentEls;
              }

但是以上内容不支持，我已经研究了 4 天，但我不知道该怎么做。我这样做的原因是我想跟踪用户更改并根据用户所做的草稿更改元素。问题是，某些元素没有 id，并且 xpath 与其他元素冲突。例如，如果我想改变绿色。它将如何变得独一无二？

【问题讨论】：

也许这个框架可以解决你的问题angularjs.org
如何。请告诉我这个框架在哪里？
S.O.上有很多类似这样的问题
向下滚动并花几分钟查看示例。如果我理解正确，整个“任务”可以使用框架轻松完成（动态更改文本并在数据库中更新）。
您打算如何将更改存储在数据库中？您不只是将文档存储为 XML 吗？

标签： javascript jquery

【解决方案1】：

这样的事情怎么样？

var getUniquePath = function( node ) {

    var parts = [ ];

    $( node ).parents().each( function( index, element ) {
        parts .push( element.tagName + '[' + $(element).index() + ']' );
    });

    return parts.join( '', parts.reverse() );
}

【讨论】：

你不应该使用eq过滤器而不是括号：` element.tagName + ':eq(' + $(element).index() + ')'`
我使用的语法并不重要，我只是给出方向。如果目标是创建一个选择器，那么是的，应该是这样，但这是一个细节。
我只是说你的答案并不完整。这很好;还没有测试过，但我可能会以类似的方式进行。
选择器字符串与js querySelector方法不兼容！