Javascript遍历以及如何根据父属性检索父树

Question

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

<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>

如果用户点击Jelly。它会返回类似以下内容:蛋糕/水果/果冻。

如何检索被单击元素的树？ .parentsUntil() 放在这里合适吗？

$("a").click(function () {
    alert($(this).parentsUntil('.category').data('parent'));
});

Answer 1

你走在正确的道路上。 data('parent')不过，仅返回第一个属性，因此您需要使用 jQuery#map (以及过滤父项，以便仅包含 li)。

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

(另外，正如有人在上面的评论中指出的那样，您应该使用 </ul> 标签而不是 </ui> 。)

$("a").click(function () {
    var categories = $(this).parentsUntil('.category', 'li').map(function (i, e) {
        return e.getAttribute('data-parent')
    }).toArray().reverse()
    console.log(categories.join('/'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
                 </ul>
             </li>
        </ul>
    </li>
</ul>

<小时/>

如果您不介意更改 HTML，并且希望包含项目名称本身以及封闭类别的名称，以下是我的建议:

而不是使用 data-parent并且必须在每个类别项上引用相同的信息(例如 data-parent="fruit" )，您应该定义 data-name li 上存在的属性无论它们代表一个项目还是一个类别。您的顶 ul ，其中包含每个类别和子类别，可以标记为 .categories与其他的区别ul 。我认为代码胜于 Eloquent ，因此我提供了一个示例实现。看一下 HTML 是如何重构的以及它如何使 jQuery 代码变得更简单。

$("a").click(function() {
    var names = $(this).parentsUntil('.categories', 'li').map(function(i, e) {
        return e.getAttribute('data-name')
    }).toArray().reverse()
    console.log(names.join('/'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li class="category" data-name="Deserts">
    <a>Deserts</a>
    <ul>
      <li class="category" data-name="Cakes">
        <a>Cakes</a>
        <ul>
          <li class="category" data-name="Fruit">
            <a>Fruit</a>
            <ul>
              <li class="item" data-name="Jelly">
                <a>Jelly</a>
              </li>
              <li class="item" data-name="Puree">
                <a>Puree</a>
              </li>
              <li class="item" data-name="Concentrate">
                <a>Concentrate</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>