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>'); 
     } 

我的問題是，在運行時的HTML被顯示如下：<div class="car-offers"></div>所以所有的頁面被搞砸

Answer 1

您不能將不完整的HTML片段追加到.append()。與document.write不同，jQuery的.append()方法在將它們附加到DOM之前將傳遞的字符串解析爲元素。

所以，當你這樣做：

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

jQuery的分析給定的字符串轉換爲div元素並分配car-offers價值，其className屬性，那麼追加新創建的元素到#result元素。

在單個操作中追加整個HTML字符串將解決這個問題，所以jQuery知道如何正確解析給定的字符串。

---

就個人而言，我不會建議在JS文件中放入那麼多的HTML。您可以考慮將div與display:none放在一起，然後只需撥打.show()即可。或者最初在頁面中存儲它，.detach()它存儲在一個變量中，並在必要時返回.append()。

Answer 2

您可以使用陣列join來解決這個

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

這是一個問題，我剛纔遇到過。一種選擇是在一個循環中首先創建的div容器然後填充他們作爲後您需要：

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>'); 
    } 

}