Javascript 更改动态创建的列表中单个项目的背景色

我有以下代码：

HTML

  <ul class="list" >
  <li>
    <a href="#"></a>
  </li>
 </ul>

JSFIDLE和我自己的代码之间的主要区别在于，我在脚本中运行了一个for循环，它读取数据库并向列表中添加项目。像这样：

对于（var i=1；i'，{html:text}）.appendTo（'ul.list a'）
}

---

列表中的每个项目都是指向另一页的超链接。我希望列表中的每个项目在鼠标悬停在该项目上时都更改其背景色。我的问题是，当我将鼠标悬停时，所有项目都会更改其背景颜色。出于某种原因，它可以很好地改变单个文本的颜色。如何仅更改所选项目的背景色？

问题在于您正在现有列表项目及其锚定中添加列表项目。因此，您使用的

li

选择器将应用于所有已创建和包含的项目。这是一种容易出错且无效的HTML

改变

$('<li />', {html: "testing loop"}).appendTo('ul.list a');
$('<li />', {html: "testing loop"}).appendTo('ul.list a');

$（'
'，{html:“测试循环”}）.appendTo（'ul.list a'）；
$（'
'，{html:“测试循环”}）.appendTo（'ul.list a'）；

到

$（'
'，{html:“测试循环”}）.appendTo（'ul.list'）；
$（'
'，{html:“测试循环”}）.appendTo（'ul.list'）；

或者在循环的情况下：

for( var i = 1; i < dbLength; i++ ){
  text = res[1].values[i];
  $('<li />', {html: text}).appendTo('ul.list')
}

for（var i=1；i'，{html:text}）.appendTo（'ul.list'）
}

你应该没事的

编辑： 要使每个列表元素成为锚定元素，请使用以下命令：

for( var i = 1; i < dbLength; i++ ){
  var text = res[1].values[i];
  var newElem = '<li><a href="#">' + text + '</a><li />';
  $(newElem).appendTo('ul.list')
}

for（var i=1；i

我在这里用一个有效的解决方案更新了您的JSFIDLE：

您的问题是选择了错误的元素。在一个锚定标记中有两个列表项，您选择的列表项是该锚定标记的父项

ul.list li a li {
  width: 200px;
  color: black;
  padding:0!important;
  display: block;
  transition: color 0.2s linear;
  text-decoration: none;

}
ul.list li a li:hover  {
  color: blue;
  cursor: pointer;
  background-color: red;
}

更改css

ul.list li:hover

至

ul.list li a:hover

更改javascript

    for(var i = 1; i < dbLength; i++ ){
      text = res[1].values[i];
      $('<a />', {html: text}).appendTo('ul.list li')
    }

for（var i=1；i

---

这在您的JSFIDLE上起作用。

将定位

：hover

的方式更改为

ul.list li a li:hover

，因为您希望定位锚

a

内的

li

示例：您可能不希望在锚内附加列表项，因为它是无效的HTML。这样做了。谢谢。说真的，现在我的列表项不再是超链接了。@persaprince当然不是，它们不应该是超链接。如果希望列表元素成为锚/超链接，请在每个列表元素中添加一个新的锚（

）。@persaprince我已经在答案中添加了相应的代码更改。如果我事先不知道我的列表会有多大，我该怎么做？

for( var i = 1; i < dbLength; i++ ){
  var text = res[1].values[i];
  var newElem = '<li><a href="#">' + text + '</a><li />';
  $(newElem).appendTo('ul.list')
}

ul.list li a li {
  width: 200px;
  color: black;
  padding:0!important;
  display: block;
  transition: color 0.2s linear;
  text-decoration: none;

}
ul.list li a li:hover  {
  color: blue;
  cursor: pointer;
  background-color: red;
}

    for(var i = 1; i < dbLength; i++ ){
      text = res[1].values[i];
      $('<a />', {html: text}).appendTo('ul.list li')
    }