Javascript遍历以及如何基于父属性检索父树

我有菜单。我想获取任何给定选定项目的树

<ul>
    <li>
        <a>Deserts</a>
        <ul class="category">
             <li data-parent="Deserts">
                 <a>Cakes</a>
                 <ul class="sub-category">
                     <li data-parent="Cakes">
                         <a>Fruit</a>
                         <ul class="sub-category">
                             <li data-parent="Fruit">
                                 <a>Jelly</a>
                             </li>
                              <li data-parent="Fruit">
                                 <a>Puree</a>
                             </li>
                              <li data-parent="Fruit">
                                 <a>Concentrate</a>
                             </li>
                         </ul>
                     </li>
                 </ui>
             </li>
        </ui>
    </li>
</ul>

---

你在正确的轨道上<代码>数据（'parent'）只返回第一个属性，因此您需要使用

jQuery#map

（以及过滤父属性，以便只包含

li

）

下面的演示演示如何获取给定项所属的所有类别的数组。这不包括项目本身（例如“果冻”），但我将在下面添加一些关于如何解决该问题的建议

（另外，正如有人在上面的评论中指出的，您应该使用

标记，而不是

）

$（“a”）。单击（函数（）{
var categories=$（this）.parentsUntil（'.category'，'li'）.map（函数（i，e）{
返回e.getAttribute（'data-parent'）
}).toArray（）.reverse（）
console.log（categories.join（'/'））
});



沙漠


蛋糕


果


果冻


果泥


集中







你走在正确的轨道上<代码>数据（'parent'）

只返回第一个属性，因此您需要使用

jQuery#map

（以及过滤父属性，以便只包含

li

）

下面的演示演示如何获取给定项所属的所有类别的数组。这不包括项目本身（例如“果冻”），但我将在下面添加一些关于如何解决该问题的建议

（另外，正如有人在上面的评论中指出的，您应该使用

标记，而不是

）

$（“a”）。单击（函数（）{
var categories=$（this）.parentsUntil（'.category'，'li'）.map（函数（i，e）{
返回e.getAttribute（'data-parent'）
}).toArray（）.reverse（）
console.log（categories.join（'/'））
});



沙漠


蛋糕


果


果冻


果泥


集中







注意，
应该是
@guest271314啊，谢谢你，伙计！为什么
“果冻”
会是预期结果中的最后一项？您是否正在尝试获取以前和当前元素的
.textContent
？@guest271314是。因为果冻是选中的项目。我只是想把它的父元素放到一个大范围内考虑更新问题，以澄清您想要获取以前的
数据父元素的
.textContent
，而不是
数据-*
属性值。注意，
应该是
@guest271314啊，谢谢你！为什么
“果冻”
会是预期结果中的最后一项？您是否正在尝试获取以前和当前元素的
.textContent
？@guest271314是。因为果冻是选中的项目。我只是想把它的父元素放到一个大的字符串中考虑更新问题，以澄清您想要获取以前的
数据父元素的
.textContent
，而不是
数据-*
属性值。这很好。使结构看起来像这样更有意义。出于某种原因，它没有抓取所选项目的文本。但那没关系；我能猜到你。再次感谢你！缺少什么文本<代码>数据名
应用于我所知道的每一个项目和类别。它就在我的本地机器上。有些奇怪的事情：PDid代码段本身工作不正确，还是在您自己应用这些编辑之后发生了错误？如果是后者的话，可以尝试再次复制发布的代码。这很好。使结构看起来像这样更有意义。出于某种原因，它没有抓取所选项目的文本。但那没关系；我能猜到你。再次感谢你！缺少什么文本<代码>数据名
应用于我所知道的每一个项目和类别。它就在我的本地机器上。有些奇怪的事情：PDid代码段本身工作不正确，还是在您自己应用这些编辑之后发生了错误？如果发布的代码是后者，可以尝试再次复制。
$("a").click(function () {
    alert($(this).parentsUntil('.category').data('parent'));
});