我想创建一个类似记录器,它跟踪用户的所有操作。为此,我需要标识用户与之交互的元素,以便我可以在以后的会话中引用这些元素。
在伪代码中,我想要能够做下面的事情
示例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
这将提供保存该选择器字符串并在稍后使用它以重放用户做出的动作的可能性。
这怎么可能?
更新
解决方法
我会自己回答,因为我发现一个解决方案,我不得不修改。以下脚本正在工作,基于
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; } });