我正在寻找一种方法来查找单击元素的完整路径.
例如,假设我有这个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查看其路径显示)
这是您重建完整路径的方法:
var q = $(this)
.parentsUntil('body')
.andSelf()
.map(function() {
return this.nodeName + ':eq(' + $(this).index() + ')';
}).get().join('>');
灵感来自这个答案.
| 归档时间： |
|
| 查看次数： |
6874 次 |
| 最近记录： |