Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Add class name in different li by pure in JavaScript?
Adding class names to different list items (li elements) is a common task in JavaScript DOM manipulation. This can be achieved using various methods like forEach() with classList.add(), CSS selectors, or DOM traversal properties.
Let's explore different approaches to add class names to list items using pure JavaScript.
Method 1: Using forEach() with classList.add()
The forEach() method executes a function for each array element, while classList.add() adds one or more CSS classes to an element.
Syntax
array.forEach(function(currentValue, index, arr), thisValue)
element.classList.add('className')
Example
<!DOCTYPE html>
<html>
<head>
<style>
.color1 {
color: #85C1E9;
font-weight: bold;
}
.color2 {
color: #F1C40F;
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>MSD</li>
<li>SKY</li>
<li>ABD</li>
</ul>
<script>
function addClass() {
const list = document.querySelectorAll('li');
list.forEach(function(item, index) {
if (index === 0) {
item.classList.add('color1');
} else if (index === 2) {
item.classList.add('color2');
}
});
}
addClass();
</script>
</body>
</html>
Method 2: Using nth-of-type CSS Selector
The querySelector() method with nth-of-type() allows you to select specific elements by their position.
<!DOCTYPE html>
<html>
<head>
<style>
.color1 {
color: #BB8FCE;
background-color: #F8F9FA;
}
.color2 {
color: #EC7063;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>SUPERMAN</li>
<li>SPIDERMAN</li>
<li>BATMAN</li>
</ul>
<script>
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');
}
addClass();
</script>
</body>
</html>
Method 3: Using DOM Navigation Properties
You can navigate through DOM elements using firstElementChild and nextElementSibling properties.
<!DOCTYPE html>
<html>
<head>
<style>
.color1 {
color: #DFFF00;
font-size: 18px;
}
.color2 {
color: #CCCCFF;
text-transform: uppercase;
}
</style>
</head>
<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>
Comparison of Methods
| Method | Use Case | Flexibility |
|---|---|---|
| forEach() | Multiple items with logic | High - supports conditions |
| nth-of-type() | Specific positioned elements | Medium - direct selection |
| DOM Navigation | Adjacent elements | Low - sequential access only |
Key Points
- Use
querySelectorAll()to select multiple elements -
classList.add()can add multiple classes at once - Always check if elements exist before adding classes
- CSS selectors like
nth-of-type()start counting from 1, not 0
Conclusion
Adding class names to different list items can be accomplished through multiple approaches. Use forEach() for complex logic, CSS selectors for direct targeting, or DOM navigation for adjacent elements based on your specific requirements.
2K+ Views
