Question

我正在做一个编辑器，当用户点击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与其他元素冲突。例如，如果我想改变绿色。它将如何独特？

Answer 1

这样的事情怎么样？

var getUniquePath = function( node ) {

    var parts = [ ];

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

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

如何获得元素的唯一选择器

1 个答案: