Question

我正在寻找一种方法来查找点击元素的完整路径。

例如，假设我有这个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)

我该怎么做？

是否有可以执行此操作的插件，或者我是否需要从头开始获取路径中的元素索引？

谢谢：）

Answer 1

这是您重建完整路径的方法：

var q = $(this)
  .parentsUntil('body')
  .andSelf()
  .map(function() {
    return this.nodeName + ':eq(' + $(this).index() + ')';
  }).get().join('>');

受this answer的启发。

Answer 2

如果你想要插件方法：

(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查看其路径显示）

Answer 3

.parents()

那会这么做吗？

Answer 4

您是否阅读过parent（）函数？ http://api.jquery.com/parents/

你可以得到这样的东西

我的父母是：SPAN，P，DIV，BODY，HTML

返回元素的完整路径？

4 个答案: