在Jquery中获取元素的唯一选择器 [英] Get unique selector of element in Jquery
问题描述
我想创建一个像记录器一样跟踪用户的所有操作的东西。为此，我需要识别用户与之交互的元素，这样我可以在以后的会话中引用这些元素。
在伪代码中，我想
示例HTML（可能有任何复杂性）：
< html>
< body>
< div class =example>
< p> foo< / p>
< span>< a href =bar> bar< / a>< / span>
< / div>
< / body>
< / html>
用户点击某些内容，例如链接。现在我需要识别被点击的元素并保存在DOM树中的位置以供以后使用：
（任何元素）.onclick （function（）{
uniqueSelector = $（this）.getUniqueSelector（）;
}）
现在，uniqueSelector应该是这样的（我不介意如果它是xpath或css选择器样式）：
html>身体> div.example> span> a
这将提供保存该选择器字符串并在稍后使用它的可能性，
如何实现？
更新
我的答案：获取元素的jQuery选择器
我会自己回答，因为我发现了一个我必须修改的解决方案。以下脚本正在运行，并且基于 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？'& ''）;
node = parent;
}
返回路径;
}
}）;
I want to create something like a recorder whichs tracks all actions of a user. For that, i need to identify elements the user interacts with, so that i can refer to these elements in a later session.
Spoken in pseudo-code, i want to be able to do something like the following
Sample HTML (could be of any complexity):
<html>
<body>
<div class="example">
<p>foo</p>
<span><a href="bar">bar</a></span>
</div>
</body>
</html>
User clicks on something, like the link. Now i need to identify the clicked element and save its location in the DOM tree for later usage:
(any element).onclick(function() {
uniqueSelector = $(this).getUniqueSelector();
})
Now, uniqueSelector should be something like (i don't mind if it is xpath or css selector style):
html > body > div.example > span > a
This would provide the possibility to save that selector string and use it at a later time, to replay the actions the user made.
How is that possible?
Update
Got my answer: Getting a jQuery selector for an element
I'll answer this myself, because i found a solution which i had to modify. The following script is working and is based on 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;
}
});
这篇关于在Jquery中获取元素的唯一选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
