0

我正在做一个编辑器，当用户单击 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>

当用户点击 Apple 时，唯一路径是（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 与其他元素冲突。例如，如果我想改变绿色。它怎么会是独一无二的呢？

4

1 回答 1

1

这样的事情呢？

var getUniquePath = function( node ) {

    var parts = [ ];

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

    return parts.join( '', parts.reverse() );
}
于 2013-08-30T09:58:49.283 回答