如何通过索引将类添加到系列元素中?

实际上，我正在尝试创建一个具有替代类的列表，该列表应具有每组项目的开始和结束类，例如，我有以下代码

<div class="wrap">
<div class="item-a"></div>
<div class="item-a"></div>
<div class="item-a"></div>
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-a"></div>
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
</div>

我想要达到的是

<div class="wrap">
<div class="item-a start"></div>
<div class="item-a"></div>
<div class="item-a"></div>
<div class="item-a end"></div>
<div class="item-b start"></div>
<div class="item-b"></div>
<div class="item-b end"></div>
<div class="item-a start"></div>
<div class="item-a"></div>
<div class="item-a end"></div>
<div class="item-b start"></div>
<div class="item-b end"></div>
</div>

我看到了一个解决方案，但这是依赖于jQuery。在我的场景中没有jQuery，我想用纯JavaScript实现。

我正在与react一起工作，并从API中获得一个对象数组，例如

arr = [
{class:"left", id:"0", direction:0 },
{class:"right", id:"1", direction:1 },
{class:"right", id:"2", direction:1 },
{class:"left", id:"3", direction:0 },
{class:"left", id:"4", direction:0 },
{class:"left", id:"5", direction:0 },
{class:"right", id:"6", direction:1 },
{class:"right", id:"7", direction:1 },
]

并循环遍历以列出

项我试图实现与for循环，但没有成功

好吧，重要的事情先说。在对象数组中有一个错误:你放了:

id ="0",

代替:

id:"0"。

现在，要给每个元素在数组中各自的类，使用this.

var arr = [
{class:"left", id:"0" },
{class:"right", id:"1" },
{class:"right", id:"2" },
{class:"left", id:"3" },
{class:"left", id:"4" },
{class:"left", id:"5" },
{class:"right", id:"6" },
{class:"right", id:"7" },
]
var cArr = Array.from(document.querySelector(".wrap").children);
//converts NodeList into Array just in case
for(var i in cArr) {
//loops elements
if(arr[i] === undefined || arr[i].class === undefined) continue;
//makes sure object in arr is defined
cArr[i].classList.add(arr[i].class);
//gives element specified class in arr
console.log(cArr[i]);
//console logs the element to make sure the class was added
}

var arr = [
{class:"left", id:"0" },
{class:"right", id:"1" },
{class:"right", id:"2" },
{class:"left", id:"3" },
{class:"left", id:"4" },
{class:"left", id:"5" },
{class:"right", id:"6" },
{class:"right", id:"7" },
]
var cArr = Array.from(document.querySelector(".wrap").children);
for(var i in cArr) {
if(arr[i] === undefined || arr[i].class === undefined) continue;
cArr[i].classList.add(arr[i].class);
console.log(cArr[i]);

}

<!DOCTYPE html>
<html>
<head>
<title>classes</title>
<style>
</style>
</head>
<body>
<div class="wrap">
<div class="item-a 1">1</div>
<div class="item-a 2">2</div>
<div class="item-a 3">3</div>
<div class="item-a 4">4</div>
<div class="item-b 5">5</div>
<div class="item-b 6">6</div>
<div class="item-b 7">7</div>
<div class="item-a 8">8</div>
<div class="item-a 9">9</div>
<div class="item-a 10">10</div>
<div class="item-b 11">11</div>
<div class="item-b 12">12</div>
</div>

<script>
</script>
</body>
</html>

相关内容

最新更新

热门标签：