एक तत्व को प्रतिस्थापित करना और jQuery

Question

में नया एक वापस लौटना, आप jQuery में किसी तत्व को कैसे प्रतिस्थापित करते हैं और हटाए गए तत्व के बजाय प्रतिस्थापन तत्व लौटाया गया है?

मेरे पास निम्न परिदृश्य है। मेरे पास कई चेकबॉक्स हैं और एक बार जब आप उनमें से किसी एक पर क्लिक करते हैं, तो चेकबॉक्स को लोडिंग आइकन द्वारा प्रतिस्थापित किया जाता है। एक बार कुछ AJAX सामान होता है, तो लोडिंग आइकन को एक टिक आइकन द्वारा प्रतिस्थापित किया जाता है।

का उपयोग jQuery के replaceWith, आप की तरह कुछ करना चाहते हैं: क्योंकि replaceWith रिटर्न तत्व यह है कि हटा दिया गया था, नहीं एक जो जोड़ दिया गया

$("input[type='checkbox']").click(function() { 

    $(this).replaceWith("<img src='loading.jpg' alt='loading'/>"); 
    $.post("somepage.php"); 
    $(this).replaceWith("<img src='tick.jpg' alt='done'/>"); 

}); 

बहरहाल, यह काम नहीं करता। तो AJAX सामान पूरा होने के बाद, loading.jpg बस हमेशा के लिए रहेगा।

क्या कोई तरीका है कि मैं इसे चुनने के बिना प्रतिस्थापन तत्व वापस कर सकता हूं?

अग्रिम धन्यवाद।

Answer 1

, लोडिंग छवि एक वर्ग दें तो पद कॉलबैक में, छवि तुम सिर्फ इंजेक्शन गया है खोजने के लिए एक चयनकर्ता के रूप में वर्ग का उपयोग ।

$("input[type='checkbox']").click(function() { 
    $(this).replaceWith("<img src='loading.jpg' alt='loading' class='loading-image' />"); 
    $.post("somepage.php", function() { 
     $('.loading-image').replaceWith("<img src='tick.jpg' alt='done'/>"); 
    }); 
}); 

आप इन एक समय में चल के कई हो सकता है, तो आप this के निकटतम माता पिता हो और का उपयोग इस संदर्भ के रूप में जब वर्ग के लिए खोज कर सकते हैं।

EDIT: नया तत्व संग्रहीत करने के लिए एक चर का उपयोग करने वाला एक और विकल्प और कक्षा को लागू करने की आवश्यकता को हटा देता है और फ़ंक्शन लौटाते समय नए तत्व की खोज को हटा देता है।

$("input[type='checkbox']").click(function() { 
    var loading = $("<img src='loading.jpg' alt='loading' />"); 
    $(this).replaceWith(loading); 
    $.post("somepage.php", function() { 
     loading.replaceWith("<img src='tick.jpg' alt='done'/>"); 
    }); 
}); 

Answer 2

आप इसे एक विशिष्ट आईडी सूचकांक का उपयोग कर दे सकता है:

$("input[type='checkbox']").click(function() { 
    var index = $("input[type='checkbox']").index(this); 
    $(this).replaceWith("<img src='loading.jpg' id='myLoadingImage" + index + "' alt='loading'/>"); 
    $.post("somepage.php"); 
    $('#myLoadingImage'+index).replaceWith("<img src='tick.jpg' alt='done'/>"); 

}); 

Answer 3

एक तत्व बनाएँ और replaceWith को पैरामीटर के रूप में इसका इस्तेमाल करते हैं?

 

$('input[type=checkbox]').click(function() { 
    var img = document.createElement('img'); 
    img.src = 'loading.jpg'; 
    $(this).replaceWith(img); 
    $.post('somepage.php', function() { 
     $(img).replaceWith('<img src="tick.jpg" alt="done"/>'); 
    }); 
}); 
 

Answer 4

क्यों इस तरह एक मध्यवर्ती jQuery वस्तु नहीं बनाने के लिए, ...

$("input[type='checkbox']").click(function() { 
    var insertedElement = $("<img src='loading.jpg' alt='loading'/>"); 
    $(this).replaceWith(insertedElement); 
    $.post("somepage.php"); 
    var anotherInsertedElement = $("<img src='tick.jpg' alt='done'/>"); 
    $(this).replaceWith(anotherInsertedElement); 
    //do something with either of the inserted elements 
}); 

Answer 5

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

आपकी सबसे अच्छी शर्त पोस्ट कॉलबैक फ़ंक्शन का उपयोग करना है जो tvanfosson सुझाता है।

Answer 6

इसे जांचें।

$.fn.replaceWithMod = function(obj) { 
var $a = $(obj); 
this.replaceWith($a); 
return $a; 
}; 

var newObj = $('a').replaceWithMod('<div>New Created Object</div>'); 
$(newObj).css('color','green'); 

Answer 7

मैं क्योंकि मैं कोड की एक पंक्ति में नए आइटम के लिए एक सूचक को पुनः प्राप्त करने में सक्षम होना चाहते एक समान परिणाम प्राप्त करने के एक छोटे से प्लगइन लिखा था।

(function($){ 
    $.fn['overwrite'] = function(target){ 
     $(target).replaceWith(this); 
     return this; 
    } 
}(jQuery)); 

प्रयोग उदाहरण:

$("input[type='checkbox']").click(function() { 
    var $loading = $("<img src='loading.jpg' alt='loading' class='loading-image' />").overwrite(this); 
    $.post("somepage.php", function() { 
     $loading.replaceWith("<img src='tick.jpg' alt='done'/>"); 
    }); 
}); 

Answer 8

अगर वहाँ विशेष रूप से replaceWith विधि का उपयोग करने एक आवश्यकता नहीं है - आप replaceAll तरीका है जिसके replaceWith के विपरीत है इस्तेमाल कर सकते हैं।

जवाब यहाँ देखें: (answer to a similar question asked a year later) replaceAll वस्तु पैरामीटर या मिलान किया तत्वों के साथ पैरामीटर के रूप में पारित कर दिया चयनकर्ता मिलान तत्व के रूप में पारित कर दिया में प्रत्येक तत्व बदल देता है और मिलान किया तत्वों (नई सामग्री) देता है।

इस तरह, tvanfosson के जवाब में संपादित करें (और कीपर के जवाब में कोड) इस प्रकार दिखाई देगा:

$("input[type='checkbox']").click(function() { 
    var loading = $("<img src='loading.jpg' alt='loading' />").replaceAll($(this)); 
    $.post("somepage.php", function() { 
     loading.replaceWith("<img src='tick.jpg' alt='done'/>"); 
    }); 
}); 

यह केवल एक लाइन में कम है, लेकिन संक्षिप्तता के लिए और replaceAll उपयोग करने का विकल्प शामिल करने के लिए() मैंने इस जवाब को इस पुराने और अधिक देखे जाने वाले प्रश्न में जोड़ने के लिए उपयुक्त देखा।