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

要查找 child 个元素，您可以使用以下方法之一：

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

在您的点击处理程序中，this 将是 "click here" div。使用 > 的选择器意味着找到 child 元素，但在您的 HTML 中 ul 不是 this 的 child 元素（单击此处), 所以行不通。

所以你需要找到下一个 ul，而不是child 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>

JQuery 获取子项所有数据属性

JQuery get child all data attributes

jquery

jquery-selectors