come nascondere più selettori come una volta con jQuery

Question

Come mai questo ..

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

non è equvalent a questo ...

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

che si verifica su un evento click, ma doesn' t funzionano allo stesso modo di digitare manualmente più tag hide(). Sto solo cercando di ridurre l'uso del tag hide() per ogni div che continuo ad aggiungere all'interno del mio genitore #container div.

Answer 1

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

o semplicemente dare ogni elemento DOM che si nasconde la stessa classe e si può fare solo:

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

Answer 2

Si può facilmente il controllo attraverso i CSS. Aggiungi una classe nascosta al contenitore padre che avrà uno stile display:none al suo interno. Se non si desidera display:none per div con classe toggle2, sostituire lo stile per questo elemento. In questo modo non è necessario chiamare hide su tutti i contenitori o selezionare tutti i contenitori e chiamare il metodo hide.

Prova questa

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