Question

<div class="top">
    <div class="branch">
        <div class="branch">
             <div class="leaf">click</div>
        </div>
    </div>
</div>

当我点击最里面的<div class="leaf">时，如何从top到达自身：

top,branch,branch,leaf

编辑澄清 我希望在数组中包含路径：

arr[0]='top';
arr[1]='branch';
arr[2]='branch';
arr[3]='leaf';

有一个简单的解决方案吗？

Answer 1

这将做你想要的。 console.log语句适用于Firebug。只需将其替换为使用该阵列的代码即可。

$(".leaf").click(function(){
   var $this = $(this),
       array = $.map(
         $this.add($this.parents(':not(:has(div.top))')), 
         function(n){ return n.className }
       ).reverse();

   console.log( array );
});

单击后会输出：

["top", "branch", "branch", "leaf"]

<强>更新

要从结果中排除top，只需更改选择器：

$(".leaf").click(function(){
   var $this = $(this),
       array = $.map(
         $this.add($this.parents(':not(:has(div.top)):not(div.top)')), 
         function(n){ return n.className }
       ).reverse();

   console.log( array );
});

单击后会输出：

["branch", "branch", "leaf"]

Answer 2

一个简单的$('.leaf').parents().get()将以相反的顺序为您提供所有父项的数组。

$('.leaf').add($('.leaf').parents()).not(':has(.top)').get().reverse().map( function(e) {
    return $(e).attr('class');
});

将为您提供所需的数组。

这可能具有足够大的复杂性，如果您计划使用它，那么值得将其作为插件。

Answer 3

如果您想要转到父级，请使用parent（）调用

http://docs.jquery.com/Traversing/parent

您可能也喜欢父母（），它会向您返回所有父母的列表：

http://docs.jquery.com/Traversing/parent

如果你想要下去，你将不得不使用孩子（）[对于你的情况，每个项目只有一个孩子]

http://docs.jquery.com/Traversing/children#expr

jquery中的常规遍历选项：

http://docs.jquery.com/Traversing

Answer 4

这是jquery文档中的整个部分，描述了如何遍历dom。在这里查看http://docs.jquery.com/Traversing

Answer 5

$('div.leaf').click(function() {
   $(this).parents('div.top'); // This will get you the top-level div
   $(this).parents('div.branch'); // This will get you all the branches
});

<强> EDITED

这当然假设没有其他div.top和div.branch是您指定的树的父母。

如何用jQuery解析DOM？

5 个答案: