.each() 将属性添加到从 jquery 到 js 的父级答案

【问题标题】：.each() add an attribute to a parent from jquery to js.each() 将属性添加到从 jquery 到 js 的父级
【发布时间】：2019-01-08 15:14:44
【问题描述】：

我是 js 和 jquery 的新手，需要帮助将我的代码从 jquery 重写为纯 js。

我有几个父 div。它们每个里面都有一个子 div。

我想向子级和父级添加一个类，但作为数据名称中的属性值添加到父级。

类名存储在一个数组中，换句话说，第一个父级及其子级将获得一个 array[0] 类名，第二个父级及其子级 - array[1] 类名，等等。

我用这个 jquery 来做这个

$(".back").each(function(i) {
    $(this).addClass(tile_array[i]);
    $(this).parent().attr("data-name", tile_array[i]);
});

我尝试用js重写如下：

var backs = document.querySelectorAll('back');
for (let i = 0; i < backs.length; i++) {
    for (let j = 0; j < tile_array.length; j++) {
        backs[i].classList.add(tile_array[j]);
        backs[i].parentNode.setAttribute("data-name", tile_array[j]);
    }
}

但是，这不起作用。我应该如何重写我的代码以使其正常工作？

提前致谢！

【问题讨论】：

你有一个错字 - querySelectorAll('back') 中缺少一个类选择器
除了@RoryMcCrossan 指出的错别字之外，我猜你也不希望tile_array 中的所有内容都应用于每个单独的“backs”，所以如果你删除内部循环和使用tile_array[i]，你应该有一个从数组中元素到类的一对一映射，不是吗？
你也不需要第二个for (let j = 0; j < tile_array.length; j++) {
$(this).parent("div').attr("data-name", tile_array[i]);
非常感谢所有贡献的人！！！我更正了错字并删除了一个内循环！一切都很完美！你在摇摆，男人们！！！

标签： javascript jquery html

【解决方案1】：

试试这个：backs.length 和 tile_array.length 是一样的。所以不需要啊内循环

for (let i = 0; i < backs.length; i++) {
        backs[i].classList.add(tile_array[i]);
        backs[i].parentNode.setAttribute("data-name", tile_array[i]);
   }

并且在querySelectorAll('.back')中添加一个类

【讨论】：

【解决方案2】：

你可以跳过内部循环——你不会在你的 jQuery 中使用它，你为什么要在这里这样做？

另外，要设置data 属性，Javascript 中有.dataset 元素属性。所以你的最终代码是这样的：

var backs = document.querySelectorAll('back');
for (let i = 0; i < backs.length; i++) {
  backs[i].classList.add(tile_array[i]);
  backs[i].parentNode.dataset.name = tile_array[i]
}

【讨论】：