我想创建像记录器一样跟踪用户的所有动作.为此,我需要识别用户与之交互的元素,以便我可以在以后的会话中引用这些元素.
用伪代码说,我希望能够做类似以下的事情
示例HTML(可能有任何复杂性):
<html>
<body>
<div class="example">
<p>foo</p>
<span><a href="bar">bar</a></span>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
用户点击某些内容,例如链接.现在我需要识别被点击的元素并将其位置保存在DOM树中以供以后使用:
(any element).onclick(function() {
uniqueSelector = $(this).getUniqueSelector();
})
Run Code Online (Sandbox Code Playgroud)
现在,uniqueSelector应该是这样的(我不介意它是xpath还是css选择器样式):
html > body > div.example > span > a
Run Code Online (Sandbox Code Playgroud)
这将提供保存该选择器字符串并在以后使用它来重放用户所做的操作的可能性.
怎么可能?
得到了我的答案:为元素获取jQuery选择器
在伪代码中,这就是我想要的.
var selector = $(this).cssSelectorAsString(); // Made up method...
// selector is now something like: "html>body>ul>li>img[3]"
var element = $(selector);
Run Code Online (Sandbox Code Playgroud)
原因是我需要将其传递给外部环境,其中字符串是我交换数据的唯一方式.然后,此外部环境需要发回结果以及要更新的元素.所以我需要能够为页面上的每个元素序列化一个唯一的CSS选择器.
我注意到jquery有一个selector方法,但它似乎不适用于此上下文.它仅在使用选择器创建对象时才有效.如果使用HTML节点对象创建对象,则它不起作用.