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

我试着用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]);
    }
}

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

提前致谢！

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

中添加课程

Answer 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]
}

.each（）将一个属性从jquery添加到js

2 个答案: