如何通过索引向系列中的元素添加类？

问题描述

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

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

我看到了 a solution 但这取决于 jQuery。我的场景中没有 jQuery，我想用纯 JavaScript 来实现。

我正在使用 react 并从 API 中获得一个对象数组，例如

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

并循环遍历以列出项目

我正在尝试使用 for 循环实现但没有成功

解决方法

好的，第一件事。对象数组有错误：你把：

id='0',

代替：

id:'0'。

现在，要为数组中的每个元素赋予它们各自的类，请使用它。

  var arr = [
    {class:"left",id:"0" },{class:"right",id:"1" },id:"2" },{class:"left",id:"3" },id:"4" },id:"5" },id:"6" },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",]
    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>

ecmascript-2016 ecmascript-6 html javascript

如何通过索引向系列中的元素添加类？

问题描述

解决方法

相关问答