How to Apply css class on runTime

Question

I am new to jQuery. I want to apply css class to my <li> element but it's not working. Can anyone help me?

My markup is:

<ul class='change'>
    <li>companyName</li>
    <ul id='uid'>
        <li onClick='callTest()'>subcompany</li>
        <li onClick='callTest()'>subcompany</li>
        <li onClick='callTest()'>subcompany</li>
    </ul>

  <ul id='uid'>
        <li onClick='callTest()'>subcompany2</li>
        <li onClick='callTest()'>subcompany2</li>
        <li onClick='callTest()'>subcompany2</li>
    </ul>
    </li>
</ul>

My problem is when I call the callTest() method, I want to change the background color for that <li> i am trying this way not working:

$('#uid li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
})

It's working fine but the first I selected subcompany it's applied selected class for that and now I selected subcompany2 for this also applied selected class but on this time I want to remove subcompany class. How can I do this?

Works fine here jsfiddle.net/ggNrr are you getting any errors? — Anton
– Anton, Commented Aug 28, 2013 at 8:00
You don't need the onclick="callTest()" if you are using jQuery click handlers — CodingIntrigue
– CodingIntrigue, Commented Aug 28, 2013 at 8:00

LopeGV · Accepted Answer · 2013-08-28 08:04:05Z

1

Modify your HTML this way:

<ul class='change'>
    <li>companyName</li>
    <ul id='uid'>
        <li>subcompany</li>
        <li>subcompany</li>
        <li>subcompany</li>
    </ul>
</ul>

and ADD this JS this way:

$('#uid > li').each(function () {
    $(this).on("click", function() {
        console.log("call lil...'");
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

answered Aug 28, 2013 at 8:04

LopeGV

964 bronze badges

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

Comments

Arun P Johny · Accepted Answer · 2013-08-28 08:00:43Z

1

The problem looks like you are targeting all li elements, including the parent instead of targeting only those are under uid

$('#uid li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
})

Demo: Fiddle

answered Aug 28, 2013 at 8:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

kgd · Accepted Answer · 2013-08-28 08:01:34Z

0

It is working fine actually

$('ul li').click(function(){
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
});

Here is the demo: JsFiddle

Check your html file. There must be a problem including your script or the jquery.

answered Aug 28, 2013 at 8:01

kgd

1,6752 gold badges11 silver badges15 bronze badges

Comments

Praveen · Accepted Answer · 2013-08-28 08:02:14Z

0

You code is right. Since you've added this script in head/body it is reason for not working.

So just Wrap it in $(document).ready(function()..

$(document).ready(function(){
$('ul li').click(function(){
    console.log("call lil...'");
      $(this).addClass('selected').siblings().removeClass('selected');
    })
});

Also try to used .on() event handler like this

$(document).ready(function(){
$('ul li').on('click', function(){
    console.log("call lil...'");
      $(this).addClass('selected').siblings().removeClass('selected');
    })
});

answered Aug 28, 2013 at 8:02

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Comments

Nikolaj Zander · Accepted Answer · 2013-08-28 08:03:37Z

0

Remove the onclick at the li and add handlers when document is ready:

$(document).ready(function(){
  $('ul li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
    callTest();
  })
});

answered Aug 28, 2013 at 8:03

Nikolaj Zander

1,2709 silver badges13 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-28 08:03:42Z

0

DEMO

$('li').click(function (e) {
    $('li').removeClass('selected');
    $(e.target).addClass('selected');
})

answered Aug 28, 2013 at 8:03

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

Vito Schiavo · Accepted Answer · 2013-08-28 08:04:58Z

0

Call callTest() inside che click handler.

answered Aug 28, 2013 at 8:04

Vito Schiavo

2231 gold badge2 silver badges8 bronze badges

Comments

Manu M · Accepted Answer · 2013-08-28 08:06:16Z

0

onclick attribute is not needed in the li elements. Remove those

answered Aug 28, 2013 at 8:06

Manu M

1,0645 silver badges18 bronze badges

Comments

Pajken · Accepted Answer · 2013-08-28 08:11:30Z

0

There is a HTML-issues here:

<ul class='change'>
    <li>companyName
        <ul id='uid'>
            <li onClick='callTest()'>subcompany</li>
            <li onClick='callTest()'>subcompany</li>
            <li onClick='callTest()'>subcompany</li>
        </ul>
    </li> <!-- I moved this one -->
</ul>

regarding your jQuery you can do it like this instead:

$('ul.change > li').click(function(){ //Only applies to the direct child of ul.change
    console.log("call lil...'");
      $(this).addClass('selected');
    })

edited Aug 28, 2013 at 8:11

answered Aug 28, 2013 at 8:04

Pajken

5191 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to Apply css class on runTime

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related