我想创建一个类似记录器的东西,它可以跟踪用户的所有动作。为此,我需要确定用户与之交互的元素,以便在以后的会话中可以引用这些元素。
我用伪代码说过,我希望能够做以下事情
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
这将提供保存该选择器字符串并在以后使用它的可能性,以重播用户执行的操作。
那怎么可能?
我自己回答,因为我找到了必须修改的解决方案。以下脚本正在运行,并且基于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; } });