मैं स्मृति में टेम्पलेट के एचटीएमएल को संशोधित करने की कोशिश कर रहा हूं और फिर इसे किसी अन्य एचटीएमएल तत्व में प्रीपेड कर रहा हूं
var messageTemplate = $("#messageTemplate").clone()
.removeAttr('id').removeClass("hidden").html();
var timeStamp = message.TimeStamp;
console.log(timeStamp)
var relativeTime = moment(timeStamp, "YYYYMMDD").fromNow();
$(messageTemplate).find("#message").html(message.Data)
$(messageTemplate).find("#moment").html(relativeTime);
$(messageTemplate).find("#senderName").html(message.SenderUser.Username);
$("#message-dropdown").prepend(messageTemplate);
टेम्पलेट को हथियाना ठीक काम करता है और इसे प्रीपेन्ड करता है, हालांकि, एचटीएमएल मूल टेम्पलेट है, और भले ही मैं एचटीएमएल सेट कर रहा हूं, यह अनमोडिफाइड है। क्या कोई समझा सकता है कि क्लोन तत्व के एचटीएमएल को सही तरीके से कैसे सेट किया जाए?
मैंने यहां एक पहेली बनाई है https://jsfiddle.net/d9s6twp1/5/
2 जवाब
संपादित करें, अपडेट किया गया
JQuery को jsfiddle पर लोड नहीं किया गया था। यह भी ध्यान दें कि आप पहले से ids से document में डुप्लीकेट तैयार कर रहे थे; id में document अद्वितीय होना चाहिए। एलिमेंट पर अद्वितीय id, नया html सेट करते समय वेरिएबल template को फिर से परिभाषित करें। एक ही प्रक्रिया का उपयोग किया जा सकता है यदि कई तत्व शुरू में template html स्ट्रिंग चर के भीतर समाहित हैं; वह .filter() का उपयोग करता है, तत्व के लिए अद्वितीय id बनाएं, प्रत्येक चर नाम को परिभाषित या फिर से परिभाषित करें जो एक क्लोन तत्व का संदर्भ देता है
var template = $("#template")
.clone().removeAttr("id")
.removeClass("hidden")
.html();
console.log(template);
// re-define `template`
template = $(template).filter("#username")
.attr("id", "username-" + $("[id^=username]").length)
.html("new user");
console.log(template[0].outerHTML);
$("#container").prepend(template).hidden{
display:none;
}
#container{
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="template" class="hidden">
<span id="username">Test User</span>
</div>
<div id="container">
<br>
<span>Element container</span>
</div>Jsfiddle https://jsfiddle.net/d9s6twp1/7/
ऐसा प्रतीत होता है कि messageTemplate #messageTemplate तत्व का .html() लौटाता है, जो कि बाल तत्व .outerHTML है, न कि #messageTemplate तत्व।
messageTemplate jQuery ऑब्जेक्ट में निहित #messageTemplate के चाइल्ड एलिमेंट सिबलिंग को फ़िल्टर करने के लिए .filter() के लिए .find() को प्रतिस्थापित करने का प्रयास करें।
बाल तत्वों में कक्षा नहीं आईडी का प्रयोग करें।
var messageTemplate = $("#messageTemplate").clone()
.removeAttr('id').removeClass("hidden").html();
var timeStamp = message.TimeStamp;
console.log(timeStamp)
var relativeTime = moment(timeStamp, "YYYYMMDD").fromNow();
$(messageTemplate).find(".message").html(message.Data)
$(messageTemplate).find(".moment").html(relativeTime);
$(messageTemplate).find(".senderName").html(message.SenderUser.Username);
$("#message-dropdown").prepend(messageTemplate);