在Jquery中获取元素的唯一选择器

小编典典

在Jquery中获取元素的唯一选择器

html

我想创建一个类似记录器的东西，它可以跟踪用户的所有动作。为此，我需要确定用户与之交互的元素，以便在以后的会话中可以引用这些元素。

我用伪代码说过，我希望能够做以下事情

HTML示例（可能很复杂）：

<html>
<body>
  <div class="example">
    <p>foo</p>
    <span><a href="bar">bar</a></span>
  </div>
</body>
</html>

用户单击链接之类的内容。现在，我需要确定被单击的元素并将其位置保存在DOM树中，以备后用：

(any element).onclick(function() {
  uniqueSelector = $(this).getUniqueSelector();
})

现在，uniqueSelector应该是这样的（我不在乎它是xpath还是css选择器样式）：

html > body > div.example > span > a

这将提供保存该选择器字符串并在以后使用它的可能性，以重播用户执行的操作。

那怎么可能？

阅读 599

2020-05-10

共1个答案

小编典典

我自己回答，因为我找到了必须修改的解决方案。以下脚本正在运行，并且基于Blixt

jQuery.fn.extend({
    getPath: function () {
        var path, node = this;
        while (node.length) {
            var realNode = node[0], name = realNode.localName;
            if (!name) break;
            name = name.toLowerCase();

            var parent = node.parent();

            var sameTagSiblings = parent.children(name);
            if (sameTagSiblings.length > 1) { 
                var allSiblings = parent.children();
                var index = allSiblings.index(realNode) + 1;
                if (index > 1) {
                    name += ':nth-child(' + index + ')';
                }
            }

            path = name + (path ? '>' + path : '');
            node = parent;
        }

        return path;
    }
});

2020-05-10