How to hide multiple selectors as once with jQuery

问题

How come this..

    $("div.toggle1").hide();
    $("div.toggle3").hide();
            $("div.toggle4").hide();
            $("div.toggle5").hide();

is not equvalent to this...

           $('#container div').not('.toggle2').hide();

that occurs on a click event, but it doesn't work the same as manually typing out multiple hide() tags. I'm just trying to reduce the hide() tag usage for every div I keep adding on within my parent #container div.

回答1:

$("div.toggle1, div.toggle3, div.toggle4, div.toggle5").hide();

Or just give every DOM element that you will hide the same class and you can just do:

$('.hideClass').hide();

回答2:

You can easily control it through css. Add a hidden class to parent container which will have a display:none style in it. If you don't want display:none for div with class toggle2 then override the style for this element. In this way you dont have to call hide on all the containers or select all the containers and call hide method.

Try this

.hidden{
   display:none;
}

.hidden .toggle2{
   display:block;
}

//This will add hidden class to the container which will 
//ultimately hide all the inner divs except div with class toggle2
$('#container').addClass('hidden');

来源：https://stackoverflow.com/questions/8217853/how-to-hide-multiple-selectors-as-once-with-jquery