Comment cacher tous les éléments sauf un en utilisant jquery?

J’ai une page HTML:

  

Comment cacher tous les divs, et juste avoir le myDiv dans le corps en utilisant jquery?

Mettre à jour

La page peut contenir d’autres éléments HTML tels que des tables, des ancres, p, et je veux juste voir l’élément myDiv.

Cela devrait fonctionner:

 $('div:not(#myDiv)').hide(); // hide everything that isn't #myDiv $('#myDiv').appendTo('body'); // move #myDiv up to the body 

Mettre à jour:

Si vous voulez cacher tout cela, pas seulement les éléments div , utilisez ceci:

 $('body > :not(#myDiv)').hide(); //hide all nodes directly under the body $('#myDiv').appendTo('body'); 

Il est probablement plus simple d’emballer la totalité de la partie “cachable” de la page dans un gros élément conteneur et de la masquer directement.

Ainsi:

   

Une belle approche générale:

 $('#the_id').siblings().hide() $('#the_id').parents().siblings().hide() 

Fonctionne pour n’importe quel type d’élément.

Si votre objective est simplement de voir ce contenu et de ne rien voir d’autre, vous pouvez toujours le faire. Vous n’avez pas besoin de jQuery:

 document.body.innerHTML=document.getElementById('myDiv').innerHTML; 
 $("div").each(function () { $(this).toggle(!!this.id); }); 

Notez que cela affichera explicitement #myDiv. Si vous voulez juste cacher les autres divs:

 $("div:not(#myDiv)").show(); 

Ensuite, vous pouvez faire:

 $("#myDiv").appendTo("body");