How to Apply css class on runTime


Tags: jquery,css

Problem :

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?



Solution :

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');
    });
});

    CSS Howto..

    How to properly center steps in bootstrap?

    How to make irregular CSS border

    how can I use of a php variable into a .css file

    How to align two text boxes on same line with CSS

    How to put image and input on the same line with css

    How to include PHP code in CSS?

    How to create dashed radius border just with css?

    jquery mobile data-filter css styling--how to?

    How to convert external css properties to inline property? [closed]

    How does this CSS produce a circle?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    How to apply first-child:first-letter to only one section?

    jQuery / CSS: How to add page breaks dynamically

    How to use ExtJS stripeRows with RowExpander plugin in IE8

    Are where any examples available on how to use postcss-modules instead of css-modules?

    CSS: how to keep image never modified with same “offset” all the time?

    How to apply css for a class within h2?

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    Flotcharts: How to place the legend on the right of the chart

    CSS: How to make drop down children to at least fill parent width

    How to make Internet Explorer 8 to support nth child() CSS element?

    How to refer in CSS to all elements that have some attribute?

    “Best fit” font size - how do I measure a sentence width?

    How do I prevent child affected for transform scale in css3?

    How to make JS and CSS cacheable until changes? [closed]

    How to make one css input type be displayed the same as another input type

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    How to make this type of image popping out of box using XHTML css

    How to set the CSS styles of the image to fit bootstrap width