Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add class name in different li by pure in JavaScript?
A class serves as a model for building objects. Code is used to encapsulate data, so that it can be worked on. Although JS classes are based on prototypes, they also have some unique syntax and semantics that are not shared by ES5 classes.
Let’s dive into the article to learn more about how to add class name in different li by pure in JavaScript. To add class, use forEach() along with classList.add().
The forEach() in JavaScript
For each entry in an array, the forEach() method invokes a different function. When dealing with empty elements, this method is not used. Any operation may be carried out on the elements of the given array by the given function.
Syntax
Following is the syntax for forEach()
array.forEach(function(currentValue, index, arr), thisValue)
classList.add() in JavaScript
A DOMTokenList object serving as the value of the class elements is represented by the classList attribute. Although it is a read-only property, we can change its value by fiddling with the program's classes. The element can have one or more classes added to it using the classList.add() method.
Syntax
Following is the syntax for classList.add()
element.classList
For getting better understanding on adding class name in different li by pure in JavaScript.
Example
In the following example we are running the script to add class name in different li.
<!DOCTYPE html>
<html>
<style>
.color1 {
color: #85C1E9 ;
}
.color2 {
color: #F1C40F ;
}
</style>
<body>
<ul>
<li>MSD</li>
<li>SKY</li>
<li>ABD</li>
</ul>
<script>
addClass();
function addClass() {
const list = document.querySelectorAll('li');
list.forEach(function(task, index) {
if (index === 0) {
task.classList.add('color1');
} else if (index === 2) {
task.classList.add('color2');
}
});
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of a list where items are added differently with styled CSS, which acts as a class added by using the classList.add() method on the web-browser.
Example
In the following example where we are using document.querySelector('li:nth-oftype()') for a single element to update class.
<!DOCTYPE html>
<html>
<style>
.color1 {
color: #BB8FCE ;
}
.color2 {
color: #EC7063 ;
}
</style>
<body>
<ul>
<li>SUPERMAN</li>
<li>SPIDERMAN</li>
<li>BATMAN</li>
</ul>
<script>
addClass();
function addClass() {
const firstLi = document.querySelector('li:nth-of-type(1)');
firstLi.classList.add('color1');
const secondLi = document.querySelector('li:nth-of-type(2)');
secondLi.classList.add('color2');
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the list, where some are highlighted with CSS, which acts as a class as the event gets triggered when the user runs the script on the webpage.
Example
Let’s consider another example where we can use firtElementChild and nextElementSibbling.
<!DOCTYPE html>
<html>
<style>
.color1 {
color: #DFFF00 ;
}
.color2 {
color: #CCCCFF ;
}
</style>
<body>
<ul id="list">
<li>JACK</li>
<li>ROSE</li>
<li>SPARROW</li>
</ul>
<script>
function addClass()
{
const list = document.getElementById("list");
list.firstElementChild.classList.add("color1");
list.firstElementChild.nextElementSibling.classList.add("color2");
}
addClass();
</script>
</body>
</html>
When the script gets executed, the event gets triggered and displays a list along with some styles that are applied with CSS as the events make them act as a class that are added differently in the list on the webpage.
2K+ Views
