CODEWITHSUNDEEP
javascriptjquery
verlager
verlager

Reputation: 876

change all <li> items background color

I want to change the background of all list items. I have this but it doesn't work.

// Get all <li> elements in the document
var x = document.querySelectorAll("li"); 

for (let i = 0; < x.length; i++;) {

x[i].style.backgroundColor = "red"; 
}

Upvotes: 4

Views: 7509

Answers (7)

Sami
Sami

Reputation: 1

You can refactor the code using a forEach loop to make it way easier.

let x = document.querySelector("li");
x.forEach(function(listElement){
this.style.background = "red";
]);

Thats the easiest non-jquery way of doing this. Picture it like this, a for each loop, is basically saying this: "Ok, so for each list element, I want the background to be red".

Hope that helped, - Sami

Upvotes: 0

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Typo Error:

Replace for (let i = 0; < x.length; i++;) with for (let i = 0; i < x.length; i++)

Yet another typo: ; after i++

Your JS is correct, it's just having a typo.

var x = document.querySelectorAll("li");

for (let i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}
li {
  color: white;
  text-align: center;
  border: 1px solid white;
  font-weight: 900;
}
<ul>
  <li>YOUR</li>
  <li>JAVASCRIPT</li>
  <li>IS</li>
  <li>WORKING</li>
</ul>

Upvotes: 5

marmeladze
marmeladze

Reputation: 6564

Use

Array.
  from(document.getElementsByTagName("li"))
  .map(e => e.style.backgroundColor = "black");

or use 

[]
  .slice
  .call(document.getElementsByTagName("li"))
  .map(e => e.style.backgroundColor = "black");

You might consider to use forEach, instead of map according to your taste.

P.S. There are plenty of resources explaining execution time and other acpects between two of them.

Upvotes: 0

blackandorangecat
blackandorangecat

Reputation: 1344

Another approach is to use a little css and Javascript.

CSS:

.red{
    background-color:red
}

jQuery:

$('li').addClass('red')

The jquery then adds a class of red to all li elements. In the included example I changed the selector so that it only changes the styling of the desired list. In case there are multiple lists on the page.

$('ol.selected li').addClass('red')
.red{
        background-color:red
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

<ol class='selected'>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

Upvotes: 1

Daman Pal Singh Khanna
Daman Pal Singh Khanna

Reputation: 135

using Jquery, the following line will do the trick. $("li").css("background-color","red");

Hope this helps

Upvotes: 0

pldg
pldg

Reputation: 2588

You made a typo error, here the correct one:

var x = document.querySelectorAll("li"); 

for (let i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red"; 
}

Another solution:

x.forEach((li) => li.style.backgroundColor = "red");

Upvotes: 1

user9249376
user9249376

Reputation:

Use this:

var lists = document.getElementsByTagName("li");

// Var or Let works in the for loop

for(let list in lists) {
    lists[list].style.backgroundColor = "black";
}

Not jQuery but basic JavaScript

Upvotes: 2

Related Questions