¿Cómo se pueden ocultar todos los elementos excepto uno usando jquery?

tengo página HTML:¿Cómo se pueden ocultar todos los elementos excepto uno usando jquery?

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

cómo ocultar todos los divs, y sólo tiene la myDiv el interior del cuerpo usando jQuery?

actualización

La página puede contener algunos otros elementos HTML, como algunas tablas, anclas, p, y yo sólo quiero ver el elemento myDiv.

Fuente

2009-10-08 Amr Elgarhy

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 desea ocultar todo aquello que, no sólo div elementos, utilice en su lugar:

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

Probablemente más simple se para envolver toda la parte "ocultable" de la página en un elemento contenedor grande, y ocultar eso directamente.

así:

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

a continuación, puedes hacer esto, lo que es más limpio y más rápido:

$('#contents').hide(); 
$('#myDiv').appendTo('body');

Fuente

2009-10-08 02:41:10

¿Qué sucede si la página contiene algunos otros elementos, no todos los DIV, por ejemplo algunas tablas, enlaces, y solo quiero mostrar el myDiv? –

solo sobre el tema de la eficiencia, sería * mucho * más rápido ejecutar '$ (" * "). Hide(); $ ("# myDiv"). show(); 'comparado con' $ ("*: not (#myDiv)") ' – nickf

@nickf buen punto, aunque me he actualizado a algo que debería ser más rápido que los dos opciones: '$ ('cuerpo>: no (# miDiv)'). ocultar()'. En general, no hay demasiados elementos que se encuentran directamente debajo del elemento del cuerpo. Además, como menciono en la respuesta, es incluso mejor omitir esa tontería e ir por un elemento contenedor. –

$("div").each(function() { $(this).toggle(!!this.id); });

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

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

entonces usted puede hacer:

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

Fuente

2009-10-08 02:42:07

Si eres objetivo es sólo para ver que el contenido y no ver nada más, siempre puede hacer esto. No es necesario jQuery:

document.body.innerHTML=document.getElementById('myDiv').innerHTML;

Fuente

2011-01-18 15:06:53 Chad

Un buen enfoque general:

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

funciona para cualquier tipo de elemento.

Fuente

2012-10-23 22:03:51

+1 esta es la respuesta correcta. – Christophe

¿Extraño algo o este enfoque no funcionará para los elementos que están profundamente anidados ya que no es recursivo? –

Utilizaría '# the_id' del elemento que desea mostrar, sin importar qué tan anidado esté. La colección 'parents()' incluye todos los antepasados (up-recursive). No puede ocultar los elementos del elemento o el elemento en sí estaría oculto; y no puede ocultar los elementos del elemento o el elemento en sí no tendría contenido (para los tipos de elementos donde se aplica ese concepto). –

¿Cómo se pueden ocultar todos los elementos excepto uno usando jquery?

Respuesta

Cuestiones relacionadas