2009-10-08 3 views
39

나는 HTML 페이지가 있습니다jquery를 사용하여 모든 요소를 ​​숨기는 방법?

<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 요소, 대신를 사용

$('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

효율성의 주제에 대해서만,'$ ("*")을 실행하는 것이 훨씬 더 빠를 것입니다. – nickf

+1

@nickf 좋은 지적이지만, 나는 그것들 둘 모두보다 빠른 것이되도록 업데이트 했음에도 불구하고 $ ("# myDiv"). show();'$ ("* : not (#myDiv) 옵션 :'$ ('body> : not (#myDiv)'). hide()'. 일반적으로 body 요소 바로 아래에 너무 많은 요소가 없습니다. 게다가, 내가 대답에서 언급했듯이, 그 말도 안되는 것을 건너 뛰고 래퍼 요소를 찾으려면 더 좋습니다. –

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

하는 것으로. 그냥 다른 div를 숨기려면 :

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

을 그럼 당신은 할 수 있습니다 :

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

당신이 목적이라면 그 내용을보고 아무것도 볼 수 없습니다 단지, 당신은 언제나 할 수 이 작업을 수행. 당신은 jQuery를 필요가 없습니다

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

좋은 일반적인 방법 : 모든 요소 유형에 대한

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

작품.

+0

+1 올바른 답변입니다. – Christophe

+0

무언가를 놓치거나 재귀 적이 아닌 깊이 중첩 된 요소에 대해이 접근 방식이 작동하지 않습니까? –

+1

아무리 깊게 중첩되어 있어도, 표시하고 싶은 요소의'# the_id'를 사용합니다. 'parents()'콜렉션은 모든 조상 (up-recursive)을 포함합니다. 요소의 부모를 숨길 수 없거나 요소 자체가 숨겨집니다. 요소의 자식을 숨길 수 없거나 요소 자체에 내용이 없을 것입니다 (해당 개념이 적용되는 요소 유형의 경우). –

관련 문제