2009-10-08 12 views
39

私は、HTMLページがあります。jqueryを使用して1つを除くすべての要素を非表示にするにはどうすればよいですか?

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

がどのようにすべてのdivを非表示にして、ちょうどjqueryのを使用して体内myDivはありますか?

更新

は、ページには、いくつかのテーブル、アンカー、Pなど他のいくつかのHTML要素を含むことができ、そして私はちょうどmyDiv要素を見てみたいです。

答えて

70

これは動作するはずです:

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

更新:

をあなたの代わりにこれを使用するだけでなく、div要素、EVERYTHING非表示にする場合:

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

をおそらく単純にされますページの全体を隠すことができる部分を大きなコンテナ要素に囲み、それを直接非表示にします。そのよう

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

は次に、あなただけのクリーンかつ高速であるこれを行うことができます。これは、明示的に #myDivが表示されます

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

ページに他の要素が含まれていて、一部のテーブル、リンクなどのすべてのDIVではない場合はどうすればいいですか?myDivを表示したいだけですか? –

+4

効率の話題だけでは、 '$(" * ")を実行する方がずっと速くなります。 $( "* myDiv")。show(); '$(" *:not(#myDiv) ")' – nickf

+1

@nickf良い点ですが、オプション: '$( 'body>:not(#myDiv)')。hide()'。一般にbody要素の直下にある要素はあまり多くありません。さらに、私が答えで言及したように、そのナンセンスをスキップしてラッパー要素に行くほうが良いです。 –

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

注こと。あなただけの他のdivを非表示にしたい場合:

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

を次に、あなたが行うことができます。

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

をあなたは客観的であれば、単にその内容を見て何かを見ていないことです、あなたは常にだけのことができますこれを行う。

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

素敵な一般的なアプローチ:あらゆる要素タイプの

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

作品あなたはjQueryのを必要としません。

+0

+1これは正解です。 – Christophe

+0

私は何かを見逃していますか?このアプローチは、再帰的でないので深くネストされた要素に対してはうまくいかないでしょうか? –

+1

どのように深くネストされていても、表示したい要素の '#the_id'を使用します。 'parents()'コレクションには全ての祖先(up-recursive)が含まれています。要素の親を隠すことはできません。要素自体は隠されています。要素の子を隠すことはできません。要素自体は内容を持たないでしょう(その概念が適用される要素型の場合)。 –

関連する問題