从jQuery到JavaScript，使用.each()将属性添加到父元素

Question

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

我有几个父div，每个都有一个内部的子div。

我想给子元素和父元素都添加一个类名，但是要将父元素作为data-name属性值。

类名存储在一个数组中，换句话说，第一个父元素及其子元素将获得数组[0]类名，第二个父元素及其子元素将获得数组[1]类名，依此类推。

我使用以下jquery实现这一目标：

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

我试图用JavaScript将其重写成以下形式：

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]);
    }
}

然而，这并不起作用。我应该如何重写代码，以使其正常工作？

提前感谢！

- lessismore

---

你有一个打字错误——在 querySelectorAll('back') 中缺少了类选择器。 - Rory McCrossan

除了@RoryMcCrossan指出的错别字之外，我猜你也不想将tile_array中的所有内容应用于每个单独的“背面”，因此如果你删除内部循环并使用tile_array[i]，则应该可以将数组中的元素与类进行一对一映射，对吧？ - JVDL

你也不需要第二个 for (let j = 0; j < tile_array.length; j++) {。 - Satpal

$(this).parent("div").attr("data-name", tile_array[i]); - Hitesh Jangid

非常感谢所有做出贡献的人！！！我纠正了拼写错误并删除了一个内部循环！现在一切都完美运行！你们太棒了，伙计们！！！ - lessismore

Answer 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')中添加一个类。

- user6752436

Answer 2

你可以跳过内部循环 - 在 jQuery 中你没有使用它，为什么在这里要这样做呢？

此外，在 Javascript 中设置 data 属性有 .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]
}

- wscourge