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

前端之家收集整理的这篇文章主要介绍了在Jquery中获取元素的唯一选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想创建一个类似记录器,它跟踪用户的所有操作。为此,我需要标识用户与之交互的元素,以便我可以在以后的会话中引用这些元素。

在伪代码中,我想要能够做下面的事情

示例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

这将提供保存该选择器字符串并在稍后使用它以重放用户做出的动作的可能性。

这怎么可能?

更新

得到我的答案:Getting a jQuery selector for an element

解决方法

我会自己回答,因为我发现一个解决方案,我不得不修改。以下脚本正在工作,基于 script of 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) { 
                allSiblings = parent.children();
                var index = allSiblings.index(realNode) + 1;
                if (index > 1) {
                    name += ':nth-child(' + index + ')';
                }
            }

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

        return path;
    }
});
原文链接:https://www.f2er.com/jquery/184681.html

猜你在找的jQuery相关文章