我正在寻找一种方法来找到点击元素的完整路径。
例如，假设我有这个 HTML 代码：
<div> <ul> <li>item 1</li> <li>item 2</li> </ul> </div>
<div> <ul> <li>item 1</li> <li>item 2</li> </ul> </div>
我希望能够将路径（不知道还能叫什么）返回给点击者 元素。 alert() 现在可以了。
假设我点击了第二个 div 中的第二个 li 元素。我想打电话 背面：
div:eq(1) li:eq(1)
如果我点击第一个 div 的第一个 li 元素，它将是：
div:eq(0) li:eq(0)
我该怎么做？
是否有可以做到这一点的插件，或者我需要从头开始制作它以获取路径中元素的索引？
谢谢:)
【问题讨论】：
如果你想要插件方式：
(function($){
$.fn.extend({
getFullPath: function(stopAtBody){
stopAtBody = stopAtBody || false;
function traverseUp(el){
var result = el.tagName + ':eq(' + $(el).index() + ')',
pare = $(el).parent()[0];
if (pare.tagName !== undefined && (!stopAtBody || pare.tagName !== 'BODY')){
result = [traverseUp(pare), result].join(' ');
}
return result;
};
return this.length > 0 ? traverseUp(this[0]) : '';
}
});
})(jQuery);
为 jQuery 指定一个选择器或对象，它将获得它的完整路径。 stopAtBody 是可选的，但如果提供为 true，它只会遍历到 <BODY> 标记（使其成为有效的 jQuery 选择器）。
DEMO（点击 LI 查看他们的路径）
【讨论】：
tagName 和:eq 计数相同的标签，index() 返回子订单。
这是重建完整路径的方法：
var q = $(this)
.parentsUntil('body')
.andSelf()
.map(function() {
return this.nodeName + ':eq(' + $(this).index() + ')';
}).get().join('>');
灵感来自this answer。
【讨论】：
这样可以吗？
【讨论】：
【讨论】：