updating class using jquery

Question

In the following html, jquery, bootstrap code,

addMenuBar : function addNavigation (component) {
    var html = '<ul class="nav nav-pills nav-justified" role="tablist">';
    html += '<li id ="scenario" class="disabled"><a href="#">Scenario</a></li>';
    html += '<li id ="resolutions" class="disabled"><a href="#">Resolutions</a></li>';
    html += '<li id ="triggers" class="disabled"><a href="#">Triggers</a></li>';
    html += '</ul>';
    component.append(html);
    $('ul[id="scenario"] li').addClass("active");
}

where the component is a container div as follows:

    this.container = $(document.createElement('div'));
    this.container.addClass('patient-hover-inner');
    this.container.appendTo(this.form);

I want to change the class for the 'li' item for id = 'scenario' from 'disabled' to 'active'. how do i do this? The above won't work without any errors

$(document.createElement('div')) You are using jQuery: $("<div>") — idmean
– idmean, Commented May 31, 2015 at 17:27
Firstly you're selecting a UL with a class of scenario whereas you want the LI. Secondly [id="scenario"] should just be #scenario, and thirdly when dealing with IDs they should be unique, so you just want $('#scenario') - no tagnames necessary — MDEV
– MDEV, Commented May 31, 2015 at 17:32

AmmarCSE · Accepted Answer · 2015-05-31 19:25:57Z

2

Use switchClass()

$('li.disabled').switchClass("disabled", "active");

If you are not using jQuery UI, you can do

$('li.disabled').each(function(){
    $(this).removeClass('disabled');
    $(this).addClass('active');
});

edited May 31, 2015 at 19:25

answered May 31, 2015 at 17:27

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

7 Comments

idmean Over a year ago

Only available in jQuery UI.

Rookie Over a year ago

that wont work either, i have created a fiddle in my question

AmmarCSE Over a year ago

@Rookie, where is the fiddle?

AmmarCSE Over a year ago

@Rookie, that link is broken

Rookie Over a year ago

its working now, just that the javascript is in the html so its throwing messages

|

galitskyd · Accepted Answer · 2015-05-31 17:53:05Z

1

$('ul[id="scenario"] li').addClass("active");

can be

$('ul li#scenario').removeClass("disabled").addClass("active");

If a li has the disabled class it will be removed. If it doesn't then nothing happens. In either case the 'active' class will be added.

edited May 31, 2015 at 17:53

answered May 31, 2015 at 17:45

galitskyd

2161 silver badge6 bronze badges

9 Comments

galitskyd Over a year ago

The ul you are adding before that selector doesn't have an id=scenario. Your selector should actually be $('ul li#scenario')

Rookie Over a year ago

My intent is to activate just one 'li' which has the id=scenario from the 'ul' list. how do i do that?

Rookie Over a year ago

you might have to add the bootsrap CSS and jquery as an external link to the fiddle from this link: bootstrapcdn.com

galitskyd Over a year ago

It is because your component is not yet in the DOM when you try to select anything inside of it. You will have to wait till after your component has been added to the DOM itself before you can select any items that are being appended to the component in your functions.

galitskyd Over a year ago

Finally got your fiddle to work an example of what I just mentioned above: jsfiddle.net/r3g62zuz/1

|

Collectives™ on Stack Overflow

updating class using jquery

2 Answers 2

7 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related