CODEWITHSUNDEEP
javascriptjqueryhtml
Ikro
Ikro

Reputation: 13

How to add specific class to specific id in jquery

Im try to add specific class when the user click the li with specific id, im try to do when the li has click remove all of the other class previously and add a specific class to this li, for exemple if the user click in li with id 1 the class asigned is one, if the user click in li with id 2 the class add is two and remove the previously class one etc, etc. My code look like this:

<ul class="menu-primary">

    <li id="1"><a href="#">Index</a></li>
    <li id="2" ><a href="#">Other</a></li>
    <li id="3"><a  href="#">Thats why</a></li>
    <li id="4"><a id="3" href="#">Sports</a></li>
    <li id="5"><a id="4" href="#">Clients</a></li>
    <li id="6"><a id="5" href="#">Things about history</a></li>
    <li id="7"><a href="#">Contact</a></li>

</ul>

jquery look like this:

$(document).ready(function() {
if($('.menu-primary #1').hasClass('one')){
   $('.menu-primary #1').removeClass('one')
}else{
  $('.menu-primary #1').addClass('one')
}

if($('.menu-primary #2').hasClass('dos')){
   $('.menu-primary #2').removeClass('dos')
}else{
  $('.menu-primary #2').addClass('dos')
}

if($('.menu-primary #3').hasClass('three')){
   $('.menu-primary #3').removeClass('three')
}else{
  $('.menu-primary #3').addClass('three')
}

if($('.menu-primary #4').hasClass('four')){
   $('.menu-primary #4').removeClass('four')
}else{
  $('.menu-primary #4').addClass('four')
}

if($('.menu-primary #5').hasClass('five')){
   $('.menu-primary #5').removeClass('five')
}else{
  $('.menu-primary #5').addClass('five')
}

if($('.menu-primary #6').hasClass('six')){
   $('.menu-primary #6').removeClass('six')
}else{
  $('.menu-primary #6').addClass('six')
}

if($('.menu-primary #7').hasClass('seven')){
   $('.menu-primary #7').removeClass('seven')
}else{
  $('.menu-primary #7').addClass('seven')
}

});

Thanks for the help.

Upvotes: 0

Views: 128

Answers (4)

Samuel Cook
Samuel Cook

Reputation: 16828

You could use some vanilla javascript in this instance:

var nums = ['zero','one','two','three'];

$('.menu-primary li').click(function(){
    if( nums[parseInt(this.id)].length ){ // verifies class exists
        this.className = nums[parseInt(this.id)]; // completely overwrites class
    }
});

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

I believe that this is what you want, Instead of hard coding the if statements just try to add data for the elements in the markup and go ahead with this code.

var menu = $('.menu-primary li').click(function () {
    menu.not($(this).toggleClass($(this).data("class"))).removeClass();
});

DEMO

Upvotes: 1

LTasty
LTasty

Reputation: 2008

You need to add handler on li, after i remove attribute Class from li and add new class 

$('.menu-primary li').click(function(){
       $('.menu-primary li').removeAttr("class");
       if($(this).attr("id")=="1"){
          $(this).addClass("one");
       }
       if($(this).attr("id")=="2"){
          $(this).addClass("two");
       }
       if($(this).attr("id")=="3"){
          $(this).addClass("three");
       }
    });

http://jsfiddle.net/lTasty/kLm1fb0v/

Upvotes: 2

Tariq
Tariq

Reputation: 2871

Here is an example:

$("#my_id").addClass('active');

This is what you need?

Upvotes: 0

Related Questions