2009-10-08 13 views
39

मैं HTML पृष्ठ है:jquery का उपयोग कर एक को छोड़कर सभी तत्वों को कैसे छुपाएं?

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

सभी divs कैसे छिपाने के लिए, और सिर्फ शरीर jQuery का उपयोग कर अंदर myDiv है?

अद्यतन

पेज इस तरह के कुछ टेबल, एंकर, पी के रूप में कुछ अन्य एचटीएमएल तत्व शामिल हो सकते हैं, और मैं सिर्फ 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> 

तो फिर तुम सिर्फ इस है, जो स्वच्छ और तेजी से होता है कर सकते हैं:

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

क्या होगा यदि पृष्ठ में कुछ अन्य तत्व हैं, सभी डीआईवी नहीं, उदाहरण के लिए कुछ टेबल, लिंक, और मैं सिर्फ myDiv दिखाना चाहता हूं? –

+4

बस दक्षता के विषय पर, यह * $ ("*") चलाने के लिए * अधिक * तेज होगा। छुपाएं(); $ ("# myDiv")। दिखाएं(); '$ (" *: नहीं (#myDiv) "की तुलना में' – nickf

+1

@nickf अच्छा बिंदु, हालांकि मैंने उन दोनों को अपडेट किया है जो उन दोनों से तेज़ होना चाहिए विकल्प: '$ ('बॉडी>: नहीं (#myDiv)')। छुपाएं()'। आम तौर पर शरीर के तत्व के तहत बहुत अधिक तत्व नहीं होते हैं। इसके अलावा, जैसा कि मैंने जवाब में उल्लेख किया है, उस बकवास को छोड़ना और रैपर तत्व के लिए जाना बेहतर है। –

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

ध्यान दें कि यह स्पष्ट रूप से #myDiv दिखाएगा। तुम सिर्फ अन्य divs को छिपाना चाहते हैं:

$("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' का उपयोग करेंगे जिसे आप प्रदर्शित करना चाहते हैं, चाहे कितना गहराई से घोंसला हो। 'माता-पिता()' संग्रह में सभी पूर्वजों (अपरिवर्तनीय) शामिल हैं। आप तत्व के माता-पिता को छुपा नहीं सकते हैं या तत्व स्वयं छिपा होगा; और आप तत्व के बच्चों को छुपा नहीं सकते हैं या तत्व में कोई सामग्री नहीं होगी (तत्व प्रकारों के लिए जहां यह अवधारणा लागू होती है)। –

संबंधित मुद्दे