Cómo ocultar todos los elementos a excepción de uno con jquery?

He HTML de la página:

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

Cómo ocultar todos los divs, y sólo tiene el myDiv en el interior del cuerpo usando jquery?

Actualización

La página puede contener algunos otros elementos html como algunas tablas, anclajes, p, y yo sólo quiero ver la myDiv elemento.

InformationsquelleAutor Amr Elgarhy | 2009-10-08

4 Kommentare

  1. 78

    Esto debería funcionar:

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

    Actualización:

    Si quieres ocultar TODO lo que, no sólo div elementos, el uso de este lugar:

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

    Probablemente más simple es envolver todo el «hideable» parte de la página en un gran elemento contenedor, y ocultar que directamente, aunque.

    Así:

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

    Entonces usted puede hacer esto, que es más limpio y más rápido:

    $('#contents').hide();
    $('#myDiv').appendTo('body');
    • ¿qué pasa si la página contiene algunos otros elementos, no todos los DIVs, por ejemplo algunas tablas, enlaces, y sólo quiero mostrar la myDiv?
    • sólo en el tema de eficiencia, sería por tanto más rápido para ejecutar $("*").hide(); $("#myDiv").show(); en comparación con $("*:not(#myDiv)")
    • buen punto, a pesar de que he actualizado a algo que debería ser más rápido que el de las dos opciones: $('body > :not(#myDiv)').hide(). En general no hay muchos elementos que están directamente bajo el cuerpo del elemento. Además, como mencioné en la respuesta, es incluso mejor que vaya tonterías e ir a por un elemento contenedor.
    • el problema con su solución es que usted puede incluir sólo uno de los elementos a mostrar. Con nickf la solución puede mostrar más de los elementos
    • usted puede utilizar $(«body > *»).hide(); para un mejor rendimiento.
  2. 36

    Un buen enfoque general:

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

    Funciona para cualquier tipo de elemento.

    • ¿Me olvido de algo o este método no funciona para los elementos que están profundamente anidadas ya que no es recursivo?!
    • Usted podría utilizar #the_id del elemento que desea visualizar, no importa cuán profundamente anidadas. El parents() colección incluye todos los antepasados (hasta recursivo). Usted no puede ocultar el elemento de los padres o el elemento en sí sería oculto; y usted no puede ocultar el elemento de los niños o el elemento en sí no tendría contenido (para los tipos de elementos en la que ese concepto se aplica).
    • $(«*»).hide(); a partir de una respuesta anterior trabajó para ocultar pero luego no pude conseguir el div que yo quería mostrar. Chris Johnson respuesta trabajado para ocultar a todos, pero el que desee div. Podría alguien explicar como funciona esto?
    • Estamos poda de un árbol. El contenido que se desea mostrar es una rama (con un par de manzanas). La rama se conecta a una de las extremidades, que se conecta a un tronco, que se conecta a la raíz. Usted no quiere ocultar la raíz, el tronco o las extremidades, son necesarios para mantener su rama. Pero usted necesita para ocultar todas las ramas vecinas en su extremidad, y todos los vecinos de ramas en el tronco, y todos los vecinos de troncos en su raíz. Los dos-liner yo siempre oculta directamente a sus hermanos, y los hermanos de cada elemento como usted se mueve hacia la raíz, pero no ocultar a los padres, abuelos, etc. de su elemento.
    • O en 1 línea : .siblings().hide().parents().siblings().hide()
  3. 8

    Si eres objetivo es sólo para ver que contenido y no ver nada más, siempre puedes hacer esto. Usted no necesita jQuery:

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

    Tenga en cuenta que esto explícitamente mostrar #myDiv. Si sólo desea ocultar los otros divs:

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

    Entonces usted puede hacer:

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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...