改变一切 <li> 项目背景颜色

Question

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"; 
}

Answer 1

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> 

Answer 2

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

Answer 3

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");

Answer 4

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

Hope this helps

Answer 5

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> 

Answer 6

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.

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

Answer 7

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