การเพิ่ม class ให้แต่ละ li แบบเฉพาะเจาะจงด้วย JavaScript แบบ純粋

คำอธิบาย

ใช้ forEach() ร่วมกับ classList.add() เพื่อเพิ่ม class ให้แต่ละ <li> ตามดัชนี

ตัวอย่างโค้ด

<ul>
  <li>Javascript</li>
  <li>MySQL</li>
  <li>Java</li>
  <li>MongoDB</li>
</ul>

<script>
function addingClassUsingJavascript() {
  const all = document.querySelectorAll('li');
  all.forEach(function (t, i) {
    if (i === 1) t.classList.add('demo1');
    else if (i === 2) t.classList.add('demo2');
  });
}
addingClassUsingJavascript();
</script>

ผลลัพธ์

li ที่ 2 (MySQL) ได้ class demo1 (สีเหลือง) li ที่ 3 (Java) ได้ class demo2 (สีฟ้า)