CODEWITHSUNDEEP
javascriptjquery
user887958
user887958

Reputation:

jQuery - remove a class based on the elements ID

I am trying to remove a .hideme class from list which has a certain ID - the click event is in another list. Depending on which UL.tab you click, the corresponding ul.lineup class .hideme is show or removed. HTML looks like this:

    <ul class="tab">
        <li id="0">
            <a href="#">26/08/2011</a>
        </li>
        <li id="1">
            <a href="#">27/08/2011</a>
        </li>
        <li id="2">
            <a href="#">28/08/2011</a>
        </li>
    </ul>

    <ul id="0" class="lineup hideme">
       <li>...</li>
    </ul>

    <ul id="1" class="lineup hideme">
       <li>...</li>
    </ul>

    <ul id="3" class="lineup hideme">
       <li>...</li>
    </ul>

Upvotes: 1

Views: 18151

Answers (7)

Joseph Marikle
Joseph Marikle

Reputation: 78520

<ul class="tab">
    <li id="li_c0">
        <a href="#">26/08/2011</a>
    </li>
    <li id="li_c1">
        <a href="#">27/08/2011</a>
    </li>
    <li id="li_c2">
        <a href="#">28/08/2011</a>
    </li>
</ul>

<ul class="lineup hideme c1">
   <li>...</li>
</ul>

<ul class="lineup hideme c2">
   <li>...</li>
</ul>

<ul class="lineup hideme c3">
   <li>...</li>
</ul>



$("ul.tab li a").click(function(){

    $(".hideme").hide();
    $(".hideme." + this.parentNode.id.split("_")[1]).show();

});

That's how I'd do it.

http://jsfiddle.net/RVtYe/

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

You can remove the ids and simply rely on the index of the elements:

$('.tab li a').click(
    function(){
        i = $(this).closest('li').index();
        $('ul.lineup').eq(i).toggleClass('hideme');
        return false;
    });

JS Fiddle demo.

References:

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this, as a side note the ids should never start with a number.

$("ul.tab a").click(function ()
{
    $("#" + $(this).parent().attr('id')).removeClass("hideme");
});

Upvotes: -1

Senad Meškin
Senad Meškin

Reputation: 13756

this method can help you, but you should consider that id should be unique.

$('ul.tab a').click(function(){
   $('ul#'+this.parent().attr('id')).toggleClass('hideme');
});

Upvotes: 0

Andrew Lee
Andrew Lee

Reputation: 2603

Try:

$("ul.tab > li > a").click(function ()
{
    $("ul#" + $(this).parent().attr('id')).removeClass("hideme");
}

Also, as Shaz noted you cannot have duplicate ID's, or ID's that start with a number.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707328

First fix some HTML/CSS errors. ID values in HTML/CSS cannot start with a number. Also, please note that there can only be one object in an entire page with a given id value. You have duplicates. That will not work. You will have to fix both of these before any selector operations using these IDs will be reliable.

If you have an ID and you want to remove a class from that particular object, you would use this:

$("#myID").removeClass("classToRemove");

If you're trying to remove the class from all descendants of that ID, you can use this:

$("#myID .classToRemove").removeClass("classToRemove");

That will create a selector object which has all descendants of myID that have the classToRemove and then remove it from each of them.

Upvotes: 6

Shaz
Shaz

Reputation: 15867

$("#certainId").removeClass("className");

There are also two things wrong about the code you showed above:

  1. You should not have more than one specific Id on a page. For example, having two id's of #foo would be invalid HTML.

  2. Id's and classes should not start with numbers.

Upvotes: 0

Related Questions