javascript - jQuery - remove a class based on the elements ID - Stack Overflow

admin管理员组

文章数量:1345576

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>

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>

• javascript
• jquery

Share Improve this question Follow edited Sep 27, 2012 at 4:21 Eli 14.8k55 gold badges6161 silver badges7777 bronze badges asked Aug 10, 2011 at 15:56 user887958user887958 7

• What jQuery code do you have at the moment? What things did you try? – Veger Commented Aug 10, 2011 at 15:57
• just in case, you can't use numbers to begin the name of IDs/classes, just saying – leopic Commented Aug 10, 2011 at 15:58
• 3 You have multiple elements with the same id: this is not allowed, and is invalid. The id must be unique within the document. – David Thomas Commented Aug 10, 2011 at 15:59
• 1 It's pretty easy but currently your HTML is invalid because you have non-unique IDs. the jQuery needed won't work until you fix that – Cfreak Commented Aug 10, 2011 at 15:59
• 1 @Leopic, in html5 you can start an id with a numeric character, among others. (though there's no indication if the posted code is any particular version of html). – David Thomas Commented Aug 10, 2011 at 16:00

 |  Show 2 more ments

7 Answers 7

Sorted by: Reset to default 6

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.

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:

• closest().
• index().
• eq().
• toggleClass()

$("#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.

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.

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

<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/RVtYe/

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

本文标签： javascriptjQueryremove a class based on the elements IDStack Overflow