JQuery获取所有数据属性的子级

我有以下清单：

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

---

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

若要查找子元素，可以使用以下选项之一：

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

在单击处理程序中，

this

将是“单击此处”div。使用

的选择器意味着查找子元素，但在HTML中，

ul

不是

this

（单击此处）的子元素，因此不起作用

因此，您需要查找下一个

ul

，而不是子

ul

，并且

不用于此

如果

ul

是下一个元素，那么您可以使用一个简单的

.next（）

，否则您需要使用其他方法来定位它

然后可以使用

.map

请注意，

data xyz

必须是小写，否则，

$（“li”）.data（“xyz”）

将找不到它

把这些放在一起，你可以：

$（文档）。在（“单击”，“单击”，函数（）上）{
var data=$（this.next（）.find（“li”）.map（function（）{
返回$（this.data（“dataattribute”）}
).toArray（）
console.log（数据）
});



点击这里






试试地图：

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


$（函数（）{
$（“#文件系统”）。在（'click'，'click'，function（）上{
常量列表=$（此）
.nextest（“li”）//或.next（）
.find（“ul>li[数据数据属性]”）
.map（（i，li）=>$（li）.attr（“数据数据属性”））.get（）
console.log（列表）
})
})



点击这里







$（这是“ul”）
-你希望它做什么？一个
htmldevelment
永远不会大于一个字符串o。请断开链接，然后一次执行一个步骤。在调试器中评估结果。哇，你是对的。那太愚蠢了。你能告诉我你想要什么吗。您的声明不清楚
$（此>'ul'）
不起作用。这是一个元素，不是选择器
$（this）.children（'ul'）
是您所需要的。只是一个观察：如果您使用
.attr（“data xyz”）
您将始终得到一个字符串，如果您使用
.data（“xyz”）
则jquery将尝试为您提供正确的数据类型。这可能并不总是有效的，因此您可以决定使用哪种方法；了解这两个选项是关键。有趣的是，与
.data（）
不同，
.attr（）
不区分大小写，因此它们可以大小写混合，甚至可以在不同的元素上大小写不同。“…必须是小写，否则
$（“li”）。数据（“xyz”）
将找不到它。”-因此任何其他库（或vanilla JS）是否可以使用
数据xYzAbC
？我刚刚尝试了另一个答案，
.attr（“data xYz”）
可以工作，但不会使用jquery的缓存和强制-
。data（）
将为您提供匹配的类型（上面的int），而
.attr（）
始终是一个字符串。但要回答这个问题，任何其他库都会做该库所做的任何事情，而vanilla js不使用
.data（）
它使用
.dataset
将
-
转换为大写，例如
data-x-yz
变成
.dataset.xYz
如果这是jQuery或lodash或其他任何东西，则完全无关<代码>数据-*

属性必须是小写。@Andreas那么你的问题是什么？或者更确切地说，你的问题是什么？如果说.data（）不会找到混合大小写，这并不意味着任何其他库都可以工作。为什么不添加一条注释来澄清问题和答案的范围之外的问题和答案，即在所有情况下它们都必须是小写的。

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