通过纯javascript在不同的li中添加类名

我有不同的

li

，我想在

JavaScript

中的li的第一项和第二项中添加类名

这就是我尝试过但可能成功的方法：(

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

addClass（）；
函数addClass（）{
const list=document.queryselectoral（“li”）；
list.forEach（函数（任务）{
如果（任务===list.lastChild）{
list.className=“测试”；
}
if（任务===list.nthChild（2））{
list.className=“test2”；
}
})
}

.test{
颜色：红色；
}
.test2{
颜色：蓝色；
}

---

我需要你的帮助

你不需要循环。使用以下JS：

addClass();

function addClass() {

  const list = document.querySelectorAll("li");
  
  list[0].classList.add("test");
  list[1].classList.add("test2");
}

---

实例：

您不需要循环。请使用以下JS：

addClass();

function addClass() {

  const list = document.querySelectorAll("li");
  
  list[0].classList.add("test");
  list[1].classList.add("test2");
}

---

实例：

您可以检查索引并相应地添加类。也可以使用

className

而不是

classList

。如果您知道只想为第一个和第二个元素添加类，也不需要循环。只需使用

list[0]

和

list[1]

。但为了简单起见，我没有删除循环，以便您可以轻松地与您的实现方式进行比较

addClass（）；
函数addClass（）{
const list=document.querySelectorAll（'li'）；
list.forEach（函数（任务、索引）{
如果（索引==0）{
task.classList.add（'test'）；
}else if（索引===1）{
task.classList.add（'test2'）；
}
});
}

.test{
颜色：红色；
}
.test2{
颜色：蓝色；
}

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

您可以检查索引并相应地添加类。也可以使用

className

而不是

classList

。如果您知道只想为第一个和第二个元素添加类，也不需要循环。只需使用

list[0]

和

list[1]

。但为了简单起见，我没有删除循环，以便您可以轻松地与您的实现方式进行比较

addClass（）；
函数addClass（）{
const list=document.querySelectorAll（'li'）；
list.forEach（函数（任务、索引）{
如果（索引==0）{
task.classList.add（'test'）；
}else if（索引===1）{
task.classList.add（'test2'）；
}
});
}

.test{
颜色：红色；
}
.test2{
颜色：蓝色；
}

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

您可以使用

firstElementChild

和

nextelementsibling

，如下所示：

函数addClass（）
{
const list=document.getElementById（“列表”）；
list.firstElementChild.classList.add（“测试”）；
list.firstElementChild.nextElementSibling.classList.add（“test2”）；
}
addClass（）；//调用该类

.test{
颜色：绿色；
}
.test2{
颜色：蓝色；
}

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

您可以使用

firstElementChild

和

nextelementsibling

，如下所示：

函数addClass（）
{
const list=document.getElementById（“列表”）；
list.firstElementChild.classList.add（“测试”）；
list.firstElementChild.nextElementSibling.classList.add（“test2”）；
}
addClass（）；//调用该类

.test{
颜色：绿色；
}
.test2{
颜色：蓝色；
}

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

试试看

请注意，这将覆盖现有类

const addClass=（）=>{
const els=document.queryselectoral（“li”）；
els[0].className=“测试”；
els[1].className=“test2”；
}
addClass（）；

.test{
颜色：红色；
}
.test2{
颜色：蓝色；
}

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

试试看

请注意，这将覆盖现有类

const addClass=（）=>{
const els=document.queryselectoral（“li”）；
els[0].className=“测试”；
els[1].className=“test2”；
}
addClass（）；

.test{
颜色：红色；
}
.test2{
颜色：蓝色；
}

洛雷姆1
洛雷姆2
洛雷姆
知识4
知识5
lorem6
洛雷姆7
lorem8
洛雷姆9

第一个

是

第n个孩子（1）

-您可以

.querySelector（）

专门用于此目的，而不是执行循环。它只是第一个和第二个项目，还是每第二个项目？而且，如果您这样做的唯一原因是为了样式化，那么您可以在CSS中轻松地执行此操作，而无需使用Javascript？为什么不使用每个DomeElement提供的

firstElementChild

和

NextElementSibling

方法第一个

是

“li:nth child（1）”

-你可以

.querySelector（）

，而不是循环。它只是第一个和第二个项目，还是每第二个项目？而且，你可以在CSS中轻松完成这项操作，而无需使用Javascript，如果你的唯一原因是