CODEWITHSUNDEEP
javascriptjquery
Suhindra
Suhindra

Reputation: 355

Change different classes to each <li>

I've created a list and am trying to add a different class name to each

  • . Currently, this my work:

    HTML:

    <div class="collapse navbar-collapse" id="navbar-color">
<ul>
   <li><a href="#">List Item 1</a></li>
   <li><a href="#">List Item 2</a></li>
   <li><a href="#">List Item 3</a></li>
</ul>
</div>

    js:

    $(document).ready(function(){
    var color=['red-dark','orange-dark','orange','yellow','grey','green','green-dark'];
    $('#navbar-color ul li').each(function(i){
        $(this).addClass(colors[i]);
    });
});

    Any help would be greatly appreciated.

    Upvotes: 1

    Views: 76

    • Answers (4)

    Umesh Sehta
    Umesh Sehta

    Reputation: 10683

    Please check correctly your color variable.

    Demo

    $(document).ready(function() {
  var color = ['red-dark', 'orange-dark', 'orange', 'yellow', 'grey', 'green', 'green-dark'];
  $('#navbar-color ul li').each(function(i) {
    $(this).addClass(color[i]);
  });
});
    .red-dark {
  color: red;
}
.orange-dark {
  color: orange;
}
.orange {
  color: blue;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbar-color">
  <ul>
    <li><a href="#">List Item 1</a>
    </li>
    <li><a href="#">List Item 2</a>
    </li>
    <li><a href="#">List Item 3</a>
    </li>
  </ul>
</div>

    Upvotes: 3

    rrk
    rrk

    Reputation: 15846

    You were using wrong variable name in the each loop clolors for the array.

    $(document).ready(function() {
  var color = ['red-dark', 'orange-dark', 'orange', 'yellow', 'grey', 'green', 'green-dark'];
  $('#navbar-color ul li').each(function(i) {
    $(this).addClass(color[i]);
  });
});
    .red-dark {
  color: red;
}
.orange-dark {
  color: blue;
}
.orange {
  color: orange;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbar-color">
  <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
  </ul>
</div>

    Upvotes: 0

    KAD
    KAD

    Reputation: 11112

    Your selection is failing, since your are catching the <ul> with the id and trying to find a <ul> within it.

    As @Tushar said use the following :

    $(document).ready(function(){
    var color=['red-dark','orange-dark','orange','yellow','grey','green','green-dark'];
    $('#navbar-color li').each(function(i){ // remove ul
        $(this).addClass(color[i]);
    });
});

    You also have an extra double quote $('#navbar-color" that shall be removed

    Upvotes: 4

    user1608841
    user1608841

    Reputation: 2475

    Use following code :: check this fiddle https://jsfiddle.net/095wn6ms/ HTML:

    <div class="collapse navbar-collapse" id="navbar-color">
    <ul>
       <li><a href="#">List Item 1</a></li>
       <li><a href="#">List Item 2</a></li>
       <li><a href="#">List Item 3</a></li>
    </ul>
  </div>

    and js:

    $(document).ready(function(){
    var color=['red-dark','orange-dark','orange','yellow','grey','green','green-dark'];
    $('#navbar-color ul li').each(function(i){
        $(this).addClass(color[i]);
    });
});

    Upvotes: 0

    Related Questions