jQuery समारोह संलग्न पर div बंद करने से ही

Question

मैं निम्नलिखित कार्य हो:

function displayResults(Items) { 
       $("#result").text(""); 
       $("#result").append('<div class="car-offers">'); 
       $("#result").append('<div class="purple"></div>'); 
       $("#result").append('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />'); 
       $("#result").append('<h3>titleeee</h3>'); // ' + Items[i].Title + ' 
       $("#result").append('<span>Year: 2003</span>'); 
       $("#result").append('<span>Milage: 172,000 Km</span>'); 
       $("#result").append('<span class="price">53,000 QR</span>'); 
       $("#result").append('<a href="">Link</a>'); 
       $("#result").append('</div>'); 

       $("#result").append('<div class="car-offers">'); 
       $("#result").append('<div class="purple"></div>'); 
       $("#result").append('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />'); 
       $("#result").append('<h3>titlee22</h3>'); // ' + Items[i].Title + ' 
       $("#result").append('<span>Year: 2003</span>'); 
       $("#result").append('<span>Milage: 172,000 Km</span>'); 
       $("#result").append('<span class="price">53,000 QR</span>'); 
       $("#result").append('<a href="">Link</a>'); 
       $("#result").append('</div>'); 
     } 

मेरी समस्या यह है कि है रन-टाइम में एचटीएमएल की तरह प्रदर्शित किया जा रहा है: <div class="car-offers"></div> ताकि सभी पेज

में गड़बड़ की जा रही है

Answer 1

आप एचटीएमएल के अधूरे टुकड़े .append() के साथ जोड़ नहीं सकते हैं। document.write के विपरीत, jQuery की .append() विधि बीओएम में उन्हें जोड़ने से पहले तत्वों में पारित स्ट्रिंग को पार करती है।

तो तुम जब कार्य करें:

$("#result").append('<div class="car-offers">'); 

jQuery एक div तत्व में दिए गए स्ट्रिंग को पार्स करता है और उसके className संपत्ति को car-offers मूल्य प्रदान करती है, तो #result तत्व को नव निर्मित तत्व जोड़ देता है।

एक ही ऑपरेशन में संपूर्ण HTML स्ट्रिंग को जोड़ना ठीक करेगा, इसलिए jQuery जानता है कि दिए गए स्ट्रिंग को सही तरीके से कैसे पार्स करें।

---

व्यक्तिगत रूप से, मैं जेएस फ़ाइल के अंदर इतना HTML डालने का सुझाव नहीं दूंगा। आप इसे के अंदर display:none के अंदर डालने पर विचार कर सकते हैं, फिर बस .show() पर कॉल करें। या शुरुआत में पृष्ठ में, .detach() यह एक चर में संग्रहीत है और .append() आवश्यक होने पर इसे वापस लेता है।

Answer 2

आप हल करने के लिए इस

function displayResults(Items) { 
    $("#result").text(""); 
    var array = []; 
    array.push('<div class="car-offers">'); 
    array.push('<div class="purple"></div>'); 
    array 
      .push('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />'); 
    array.push('<h3>titleeee</h3>'); // ' + Items[i].Title + ' 
    array.push('<span>Year: 2003</span>'); 
    array.push('<span>Milage: 172,000 Km</span>'); 
    array.push('<span class="price">53,000 QR</span>'); 
    array.push('<a href="">Link</a>'); 
    array.push('</div>'); 

    array.push('<div class="car-offers">'); 
    array.push('<div class="purple"></div>'); 
    array 
      .push('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />'); 
    array.push('<h3>titlee22</h3>'); // ' + Items[i].Title + ' 
    array.push('<span>Year: 2003</span>'); 
    array.push('<span>Milage: 172,000 Km</span>'); 
    array.push('<span class="price">53,000 QR</span>'); 
    array.push('<a href="">Link</a>'); 
    array.push('</div>'); 
    $("#result").text(array.join('')); 
} 

Answer 3

यह एक मुद्दा मैं अभी भी सामना करना पड़ा है join के साथ एक सरणी का उपयोग कर सकते हैं।

for(var i = 0; i < 12; i++){ 

    $(el).append('<li class="scene-block"></li>'); // create container li tags 

    //fill empty li tags with content 
    for(var j = 0; j < 2; j++){ 
     $(el).find('li').last().append('<div class="select-a-scene-bg"></div>'); 
    } 

}