Modifying HTML elements using jquery

Question

I am trying to use jquery to add and remove a class from <li> elements according to a variable's value ( i ).

Here is a jsfiddle of what I have done so far http://jsfiddle.net/LX8yM/

Clicking the "+" increments i by 1 ( I have checked this with chrome's javascript console ).

One should be able to click "+" and the class .active should be removed from and added to the <li> elements accordingly.

...I can get the first <li> element to accept the class, that's all...

All your code does is increment i. The if statements are run once when the DOM is ready. — j08691
– j08691, Commented Jul 19, 2013 at 13:19

Nick Tomlin · Accepted Answer · 2013-07-22 18:08:42Z

6

No need for if statements:

$(document).ready(function (){   
  $('#add').click(function (){
    $('.numbers .active').removeClass('active').next().addClass('active');
  });
});

jsfiddle

Do note that I added an 'active' class to first list item. You could always do this via JS if you do not have control over the markup.

edited Jul 22, 2013 at 18:08

answered Jul 19, 2013 at 13:21

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Martijn Over a year ago

Very smart. This would be the better solution if you have a list of items.

Praveen Over a year ago

@Nick +1 Thats why I love SO, where people offer optimized solution :)

proPhet Over a year ago

Nice solution, could I use the same idea to decrement i and thus reverse the process? maybe .prev()?

Martijn Over a year ago

@proPhet: Yes, allthough the start-active class should be placed in the last element for it to work

Praveen · Accepted Answer · 2013-07-19 13:27:23Z

Your if..else.. is hanging in document.ready. Wrap the increment inside a function and call it respectively.

Like

$(document).ready(function (){      
    //variable
    var i = 1;

    //if statments
    function incre(i){ // wrap into a function and process it
    if(i == 1){
        $('#one').addClass('active');
        $('#two').removeClass('active');
        $('#three').removeClass('active');
    }else if(i == 2){
        $('#one').removeClass('active');
        $('#two').addClass('active');
        $('#three').removeClass('active');
    }else if(i == 3){
        $('#one').removeClass('active');
        $('#two').removeClass('active');
        $('#three').addClass('active');
    }
    }

    //change i
    $('#add').click(function (){
        incre(i++);  // pass it as a parameter
    });

});

Working JSFiddle

Martijn · Accepted Answer · 2013-07-19 13:19:17Z

1

This would be easier:

$(document).ready(function(){
    var i = 0; // set the first value
    $('#something').click(function(){
    i++; // every click this gets one higher.

    // First remove class, wherever it is:
    $('.classname').removeClass('classname');
        // Now add where you need it
        if( i==1){
        $('#one').addClass('classname');
        } else if( i==2){
        $('#two').addClass('classname');
        } else if( i==3){
        $('#three').addClass('classname');
        }
    }):
});

answered Jul 19, 2013 at 13:19

Martijn

16.2k4 gold badges39 silver badges73 bronze badges

3 Comments

Praveen Over a year ago

If you check his code, his if.. else code is hanging in document.ready

Thirumalai murugan Over a year ago

@Martijn will your answer add the class when document loaded you gave the minus mark to me huh....

Martijn Over a year ago

No it wont. But he never asked for that. Also, the default-active shouldn't be loaded via javascript. If you have a slow connection, the 'active' class will be loaded after some content is being shown, and the class 'active' might make an change to the layout, which can make it hop.

Archna Rangrej · Accepted Answer · 2013-07-19 13:22:26Z

0

See this code. Initially you have to add class to one.

$(document).ready(function (){

    //variable
    var i = 1;
    $('#one').addClass('active');

    //if statments


    //change i
    $('#add').click(function (){
        i++;
        if(i == 1){
        $('#one').addClass('active');
        $('#two').removeClass('active');
        $('#three').removeClass('active');
    }else if(i == 2){
        $('#one').removeClass('active');
        $('#two').addClass('active');
        $('#three').removeClass('active');
    }else if(i == 3){
        $('#one').removeClass('active');
        $('#two').removeClass('active');
        $('#three').addClass('active');
    }
    });

});

answered Jul 19, 2013 at 13:22

Archna Rangrej

6663 gold badges14 silver badges38 bronze badges

Comments

Tdelang · Accepted Answer · 2013-07-19 13:18:47Z

-1

It's being called only once, not in the click event function. This edit of your fiddle works: http://jsfiddle.net/LX8yM/2/

put it in the

'$('#add').click(function (){}'

answered Jul 19, 2013 at 13:18

Tdelang

1,2962 gold badges12 silver badges20 bronze badges

Collectives™ on Stack Overflow

Modifying HTML elements using jquery

5 Answers 5

4 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related