jQuery获取子所有数据属性

Question

我有以下列表：

<ul>
    <li>
        <div class="click">
            <span>click here</span>
        </div>
        <ul>
            <li data-dataAttribute="1"></li>
            <li data-dataAttribute="3"></li>
            <li data-dataAttribute="7"></li>
        </ul>
    </li>
</ul>

在这种情况下，我想获取单个 li 元素中 ul 下方的所有数据元素并将它们添加到列表中。

我尝试了以下方法：

$("#fileSystem").on('click', '.click', function () {
    var attributes = $(this > 'ul').children().data('dataAttribute');
    debugger;
});

但这不起作用，我似乎无法解决。我怀疑它可能与选择器有关。

Answer 1

要查找子元素，您可以使用以下之一：

$("> ul", this)
$(this).find("ul")

在您的点击处理程序中，this 将是“点击此处”的 div。使用 > 的选择器意味着找到子元素，但在您的 HTML 中，ul 不是 this 的子元素（单击此处），因此不起作用。

所以你需要找到下一个 ul，而不是一个孩子ul 和> 不用于那个。

如果ul 是下一个元素，那么您可以使用简单的.next()，否则您需要使用其他方法来定位它。

然后您可以使用.map 提取数据

注意data-xyz必须小写，否则$("li").data("xyz")找不到。

把这些放在一起给你：

$(document).on("click", ".click", function() {
    var data = $(this).next().find("li").map(function() { 
        return $(this).data("dataattribute")}
    ).toArray()
    console.log(data)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>
        <div class="click">
            <span>click here</span>
        </div>
        <ul>
            <li data-dataattribute="1"></li>
            <li data-dataattribute="3"></li>
            <li data-dataattribute="7"></li>
        </ul>
    </li>
</ul>

Answer 2

试试地图：

请注意您的数据属性必须全部小写

$(function() {
  $("#fileSystem").on('click', '.click', function() {
    const list = $(this)
        .closest("li") // or .next()
        .find("ul>li[data-dataattribute]")
        .map((i,li) => $(li).attr("data-dataattribute")).get()
    console.log(list)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fileSystem">
  <ul>
    <li>
      <div class="click">
        <span>click here</span>
      </div>
      <ul>
        <li data-dataattribute="1"></li>
        <li data-dataattribute="3"></li>
        <li data-dataattribute="7"></li>
      </ul>
    </li>
  </ul>
</div>