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

Question

我有以下代码：

HTML

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

的Javascript

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

CSS

ul.list {
  height: 100%;

  float: center;
  text-align: center;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
  font-family:arial,sans-serif;
}
li {
    text-align: center;
    width: 200px;
    border-bottom: 1px solid #555;
}
ul.list li a{
  width: 200px;
  color: black;
  padding:0!important;
  display: block;
  transition: color 0.2s linear;
  text-decoration: none;

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

jsfiddle

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

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

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

Answer 1

我在这里更新了你的jsfiddle：https://jsfiddle.net/persiaprince/Lem4mu68/2/

您的问题是选择了错误的元素。您在锚标记内有2个列表项，并且您正在选择列表项，该列表项是该锚标记的父项。

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

Answer 2

更改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')
    }

这适用于你的jsfiddle。

Answer 3

问题是您要在现有列表项及其锚点中添加列表项。因此，您使用的li选择器将应用于所有已创建和包含的项目。这容易出错并且HTML无效。

更改

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

到

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

或者你的循环：

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

你应该没事。

FIDDLE

修改 为了使每个列表元素成为锚点，请使用：

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')
}