Comment masquer tous les éléments, à l'exception de l'un à l'aide de jquery?

J'ai de la page HTML:

<head></head>
<body>
  <div>
    <div>
      <div id="myDiv">
      </div>
    </div>
  </div>
</body>

Comment masquer tous les divs, et ont juste la myDiv à l'intérieur du corps à l'aide de jquery?

Mise à jour

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

InformationsquelleAutor Amr Elgarhy | 2009-10-08
  1. 78

    Cela devrait fonctionner:

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

    Mise à jour:

    Si vous souhaitez masquer TOUT ce qui, non seulement div éléments, utilisez ceci à la place:

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

    Probablement le plus simple est de renvoyer l'ensemble de "masquer" une partie de la page dans un grand conteneur de l'élément, et de cacher que directement.

    Comme suit:

     <body>
     <div id="contents">
        <!-- a lot of other stuff here -->
        <div id="myDiv>
        </div>
     </div>
 </body>

    Ensuite, vous pouvez tout simplement faire ce qui est plus propre et plus rapide:

    $('#contents').hide();
$('#myDiv').appendTo('body');
    • que faire si la page contient d'autres éléments, pas tous les DIVs, par exemple, des tableaux, des liens, et je veux juste montrer la myDiv?
    • juste sur le sujet de l'efficacité, il serait bien plus rapide à exécuter $("*").hide(); $("#myDiv").show(); par rapport à $("*:not(#myDiv)")
    • bon point, bien que j'ai mis à jour pour quelque chose qui devrait être plus rapide que ces deux options: $('body > :not(#myDiv)').hide(). Généralement il n'y a pas trop d'éléments qui sont directement sous l'élément du corps. De Plus, comme je le mentionne dans la réponse, c'est encore mieux de simplement les ignorer que de bêtises et aller pour un élément wrapper.
    • le problème avec ta solution, c'est que vous ne peut contenir qu'un élément à afficher. Avec nickf de la solution, vous pouvez afficher plus d'éléments
    • vous pouvez utiliser $("body > *").hide(); pour de meilleures performances.
    InformationsquelleAutor TM.
  2. 36

    Une belle approche générale:

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

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

    • Dois-je raté quelque chose ou que cette approche fonctionne pas pour les éléments qui sont profondément imbriqués puisque ce n'est pas récursive?!
    • Vous utilisez #the_id de l'élément que vous souhaitez afficher, peu importe la façon dont profondément imbriqués. Le parents() collection comprend tous les ancêtres (jusqu'récursive). Vous ne pouvez pas cacher l'élément de parents ou de l'élément lui-même serait caché, et vous ne pouvez pas cacher les enfants de l'élément ou de l'élément lui-même aurait pas de contenu (pour les types d'éléments, d'où cette notion s'applique).
    • $("*").hide(); à partir d'une réponse précédente travaillé à cacher, mais alors je ne pouvais pas la div, j'ai voulu montrer. Chris Johnson réponse travaillé pour masquer tous, mais les div. Quelqu'un pourrait-il expliquer comment cela fonctionne?
    • Nous sommes l'élagage d'un arbre. Le contenu que vous souhaitez afficher est une branche (avec un peu de pommes). La direction générale se connecte à un membre, qui se connecte à un tronc, qui se connecte à la racine. Vous ne voulez pas masquer la racine, le tronc ou une branche -- ceux qui sont nécessaires à la tenue de votre branche. Mais vous avez besoin de cacher toutes les branches voisines sur votre membre, et tous les voisins membres sur votre coffre, et tous les voisins troncs sur votre racine. Les deux-liner, je fournis cache votre directe, les frères et sœurs et les frères et sœurs de chaque élément que vous vous déplacez vers la racine, mais ne cache pas les parents, grands-parents etc. de votre élément.
    • Ou en 1 ligne : .siblings().hide().parents().siblings().hide()
    InformationsquelleAutor Chris Johnson
  3. 8

    Si vous êtes objectif est juste de voir que le contenu et de ne pas voir autre chose, vous pouvez toujours le faire. Vous n'avez pas besoin de jQuery:

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

    Noter que ce sera explicitement montrer #myDiv. Si vous voulez juste pour masquer les autres divs:

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

    Alors vous pouvez faire:

    $("#myDiv").appendTo("body");
    InformationsquelleAutor Anthony Mills