2010-01-08 4 views
17

वहाँ कुछ jQuery जादू निम्नलिखित मुझे करने देंगे है .attr का उपयोग कर() अपनी विशेषताओं में से (जैसे, की स्थापना अपने "जाँच" विशेषता .attr का उपयोग करके ('जाँच', true))अस्थायी रूप से हटा रहा है और बाद में एक DOM तत्व पुन: सम्मिलित कर रहा है?</p> <p></p> <p>1- अद्यतन अपनी डोम तत्व एक सेट करके [0- (जैसे, एक <em>अनियंत्रित</em> चेकबॉक्स) HTML में कुछ तत्व को निर्धारित]:

2- अस्थायी रूप से डोम से वह तत्व निकाल

3 डालें डीओएम में मूल तत्व, जबकि इसकी सभी संपत्तियों को संरक्षित करते हुए एस (यानी, ताकि यह जांच की जा सके क्योंकि यह चरण 1 के अंत में था - ऐसा नहीं था जब एचटीएमएल में शुरू में परिभाषित किया गया था)

कारण है कि मैं इन तत्वों को डीओएम से हटाने में रूचि रखता हूं (बल्कि उन्हें छिपाने से) क्या मैंने देखा है कि ऐसा लगता है कि यह प्रदर्शन में काफी सुधार हुआ है। मेरे पृष्ठ में तीन अलग-अलग "राज्य" हैं और किसी दिए गए राज्य में कुल डीओएम तत्वों की केवल एक तिहाई आवश्यकता है। [मैं तीन अलग-अलग पन्नों में यह तोड़ने के बजाय अलग-अलग राज्यों के साथ एक ही पृष्ठ के रूप में रखना चाहते हैं।]

अब तक मैं दूर करने और डोम में तत्व पुन: लगाने गया था एक वर में

का मूल्य भंडारण के द्वारा
$("#myElement").html() 

और फिर इसे हटा रहा है, लेकिन अब मैंने देखा है कि उस एचटीएमएल को डीओएम में पुन: सम्मिलित करने पर [चरण 1 में] किए गए परिवर्तन "पूर्ववत" किए गए थे।

क्या ऐसा करने का कोई तरीका है - अस्थायी रूप से डीओएम से अनियंत्रित सामान को इस तरह से हटाने के लिए जो बाद में पुन: सम्मिलन के लिए अपनी सभी संपत्तियों को सुरक्षित रखता है?

var els = $('.els'), saved = els.clone (true); 
els.remove(); 
// .... do other stuff 
saved.appendTo ($('.wherever-you-want-to')); 

कहा, हालांकि, यह दिखाने के लिए & उन्हें (छिपाने display: none के माध्यम से बेहतर है, उदाहरण के लिए: किसी भी जानकारी के लिए

धन्यवाद,

लारा

उत्तर

12

आप clone विधि का उपयोग कर सकते हैं), डीओएम में हेरफेर करने की तुलना में यह बहुत महंगा है। यदि आपको .html() की बजाय डीओएम सम्मिलन & हटाने (ऊपर के रूप में) का उपयोग करना है, जो हर बार दी गई स्ट्रिंग से नोड को फिर से बनाया गया है।

+0

@Luca - यह ठीक है, एक बार वे कर रहे हैं पुन: शामिल की, वे अपने पिछले राज्यों अपने पास रखेंगे, के रूप में ओ पी चाहता था –

+0

@K प्रधानमंत्री - बहुत धन्यवाद, मैं वास्तव में क्या देख रहा था! क्लोन() के लिए 'सत्य' तर्क से गुजरने वाले निफ्टी भी इन्स हैंडलर को पुन: सम्मिलन के लिए रखता है। महान! – laramichaels

+0

अतिरिक्त के रूप में ... jQuery ऑब्जेक्ट के लिए .show() और .hide() विधियां डिस्प्ले प्रॉपर्टी को उपयुक्त के रूप में सेट करेंगी। – Tracker1

4

बस दस्तावेज़ से तत्व को हटाएं और इसका संदर्भ रखें। इसे क्लोन करने की कोई जरूरत नहीं है।

var el; 

function removeEl() { 
    el = $("#myElement")[0]; // Get the element itself 
    el.parentNode.removeChild(el); 
} 

function reinsertEl(node) { 
    node.appendChild(el); 
} 

एक अलग रूप में, क्योंकि आप अपने उदाहरण में यह उल्लेख किया है, यह एक चेकबॉक्स का checked गुण सेट सीधे बजाय attr() उपयोग करने के लिए बहुत सरल स्पष्ट और तेज है। विशेषताओं को शामिल करने की कोई ज़रूरत नहीं है और वास्तव में jQuery के attr()आमतौर पर नहीं है। बस $("#myElement")[0].checked = true; करें। यह सभी मुख्यधारा के ब्राउज़र में काम करता है।

+0

@Tim, टिप के लिए धन्यवाद! पता नहीं था कि मैं इसे इस तरह से कर सकता था। (मैंने कभी भी "वेनिला" जावास्क्रिप्ट का उपयोग किए बिना jquery सीखा ...) – laramichaels

+0

@laramichaels यह jquery है, मूल जावास्क्रिप्ट नहीं – user25

28

प्रश्न के उत्तर के छह दिन बाद jQuery ने 1.4 जारी किया जिसमें detach विधि शामिल है। जो वास्तव में आप खोज रहे हैं वह करता है।

var detached = $('#element').detach(); 
$('body').append(detached); 
संबंधित मुद्दे