डोम से तत्व निकालें और उन्हें

Question

पर वापस जोड़ें जहां मुझे एक मोडल विंडो मिली है। मैं जो करना चाहता हूं वह पृष्ठ से कुछ तत्वों को निकालना है जब मोडल खुलता है और उन्हें सही तरीके से वापस जोड़ता है जहां वे मोडल बंद होने के बाद होते थे। मैं प्रदर्शन नहीं करना चाहता: कोई नहीं, क्योंकि वह केवल उन्हें छुपाता है, मुझे उन्हें पृष्ठ से वास्तव में हटाने की आवश्यकता है। तो मेरे पास परीक्षण करने के लिए टाइमर के बाद उन्हें वापस जोड़ने और उन्हें वापस जोड़ने के लिए थोड़ा सा है ...

अद्यतन: कोड में इन जोड़ों के साथ, अब यह तत्व को पहले पकड़ लेता है, फिर इसे बाद में जोड़ता है वही तत्व मुद्दा यह है कि क्या होगा यदि उस तत्व को भी हटा दिया गया था? फिर यह वापस नहीं जोड़ देगा! इसके अलावा, जावास्क्रिप्ट इवेंट हैंडलर इस में खो जाएंगे? मैं एक प्लगइन विकसित कर रहा हूं, इसलिए इसे साइट के साथ जितना छोटा हो, उतना ही हस्तक्षेप करना चाहिए, लेकिन 3 डी तत्वों में सफारी के साथ उनमें एक बग है जो आसपास जाना असंभव है।

किसी भी विचार पर मैं 3 डी तत्वों को अस्थायी रूप से लोगों की साइट में हस्तक्षेप किए बिना कैसे हटा सकता हूं?

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); 
$3delementsposition = $3delements.prev() 

//On modal open 
$3delements.remove(); 

//On modal close 
$3delementsposition.after($3delements); 

समस्या यह है कि इस मैं उन्हें वापस आने के लिए के लिए डोम में एक निश्चित स्थान निर्देशित की आवश्यकता है। मैं तत्वों चाहते हैं वे कहाँ थे में वापस आने के लिए। मैं यह कैसे सुनिश्चित कर सकता हूं कि तत्व .append पर .remove पर जानकारी/स्थानांतरित/खोए गए जानकारी को नहीं बदल सकते हैं।

Answer 1

1. उपयोग .detach() और .append() हटाने और तत्वों, यह आपके सभी घटनाओं और डेटा को बनाए रखेगा पुनः अनुलग्न।

2. आप उलटे क्रम है कि आप उन्हें हटा दिया में वापस तत्वों को जोड़ने, तो वे सभी वापस जगह में

---

अपरीक्षित कोड गिर चाहिए

---

var elems3d = $(...); 
var elemsRemoved = []; 

// removing 
elems3d.each(function(i,o) { 
    var elem = $(o); 
    elemsRemoved.push({ 
     loc: elem.prev(), 
     obj: elem.detach() 
    }); 
}); 

// adding back 
while (elemsRemoved.length) { 
    var elem = elemsRemoved.pop(); 
    elem.loc.after(elem.obj); 
} 

Answer 2

तत्वों को हटाने के बजाय, उन्हें प्लेसहोल्डर तत्वों (replaceWith का उपयोग करके) के साथ प्रतिस्थापित करें, फिर आवश्यक होने पर प्लेसहोल्डर को मूल सामग्री के साथ प्रतिस्थापित करें। निम्नलिखित की तरह कुछ:

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); 
var originals = []; 
$3delements.each(function() { 
    // Clone original, keeping event handlers and any children elements 
    originals.push($(this).clone(true)); 
    // Create placeholder for original content 
    $(this).replaceWith('<div id="original_' + originals.length + '"></div>'); 
}); 

/// 
/// Do something asynchronous 
/// 

// Replace placeholders with original content 
for (var i in originals) { 
$('#original_' + (i + 1)).replaceWith(originals[i]); 
} 

अधिक जानकारी के लिए clone और replaceWith देखें jQuery डॉक्स में।

Answer 3

मैंने पहेली बनाई है। अगर यह आपकी आवश्यकता को पूरा करता है तो मुझे बताएं।

http://jsfiddle.net/mNsfL/12/