CODEWITHSUNDEEP
javascriptjqueryhtmlcss
persiaprince
persiaprince

Reputation: 85

Changing the background color of a single item of a dynamically created list

I have the following code:

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

The main difference between the jsfiddle and my own code is that I'm running a for loop in my script which reads a database and adds items to my list. Like so:

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

Each item on the list is a hyperlink to another page. I want each item on the list to have its background color changed when the mouse is hovered over the item. My issue is that when I hover my mouse all the items change their background color. For some reason it works perfectly fine for changing individual text color though. How do I change only the background color of the selected items?

Upvotes: 2

Views: 1240

Answers (3)

Hugo G
Hugo G

Reputation: 16494

The problem is that you are adding your list items INSIDE the existing list item and its anchor. Therefore the li selectors you are using are applied to all the created and contained items. This is error-prone and invalid HTML.

enter image description here

Change

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

to

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

or in case of your loop:

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

and you should be fine.

FIDDLE

EDIT: In order to make every list element an anchor, use this:

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

Upvotes: 1

artgb
artgb

Reputation: 3233

change css

ul.list li:hover to ul.list li a:hover

change javascript

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

This is working on your jsfiddle.

Upvotes: 2

Rachel Nicolas
Rachel Nicolas

Reputation: 1155

I updated your jsfiddle with a working solution here: https://jsfiddle.net/persiaprince/Lem4mu68/2/

Your issue was selecting wrong element. You have 2 list items inside an anchor tag, and you were selecting list item which was a parent of that anchor tag.

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

Upvotes: 2

Related Questions