Question

我想更改所有列表项的背景。我有这个，但它没有用。

    const key = 'b7e1e81e6228412cbfe203819180104';

    const url = `https://api.apixu.com/v1/current.json?key=${key}&q=auto:ip`

    const main = document.getElementById('main');

    $.getJSON(url, function(json) {
          const loc = json.location;
          const cur = json.current;
          const condition = {
            text: cur.condition.text,
            icon: cur.condition.icon
          }

          main.innerHTML = `<img src="http:${condition.icon}"><div>${condition.text}</div>`
        })

Answer 1

错误错误：

将for (let i = 0; < x.length; i++;)替换为for (let i = 0; i < x.length; i++)

又一个错字： ;之后i++

你的JS是正确的，它只是一个错字。

＆＃13;

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

＆＃13;

li {
  color: white;
  text-align: center;
  border: 1px solid white;
  font-weight: 900;
}

＆＃13;

<ul>
  <li>YOUR</li>
  <li>JAVASCRIPT</li>
  <li>IS</li>
  <li>WORKING</li>
</ul>

＆＃13;

Answer 2

使用此：

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

// Var or Let works in the for loop

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

不是jQuery而是基本JavaScript

Answer 3

你犯了一个拼写错误，这里是正确的错误：

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

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

另一种解决方案：

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

Answer 4

使用Jquery，以下行将完成这一操作。 $（＆＃34;利＆＃34）的CSS。（＆＃34;背景色＆＃34;＆＃34;红色＆＃34）;

希望这有帮助

Answer 5

另一种方法是使用一点css和Javascript。

<强> CSS：

.red{
    background-color:red
}

<强> jQuery的：

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

然后jquery会向所有red元素添加一类li。在包含的示例中，我更改了选择器，使其仅更改所需列表的样式。如果页面上有多个列表。

＆＃13;

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

＆＃13;

.red{
        background-color:red
    }

＆＃13;

<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>

＆＃13;

Answer 6

使用

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

或使用

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

根据您的口味，您可以考虑使用forEach代替map。

P.S。有很多资源可以解释执行时间和其中两个之间的其他方面。

Answer 7

您可以使用forEach循环重构代码，以便更轻松。

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

这是最简单的非jquery方式。想象一下这个，每个循环，基本上就是这样说：＆＃34;好的，所以对于每个列表元素，我希望背景为红色＆＃34;。

希望有所帮助， - 萨米

更改所有<li>项目背景颜色

7 个答案:

错误错误：