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

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

所以當你這樣做時：

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

jQuery將給定的字符串解析為div元素，並將car-offers值分配給其className屬性，然后將新創建的元素追加到#result元素。

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

---

就個人而言，我不建議將那么多HTML放在JS文件中。 您可以考慮使用display:none將其放在div ，然后只需在其上調用.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

這是我剛遇到的一個問題。 一個選項是首先在循環中創建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>');
    }

}