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元素。< / p>

在单个操作中附加整个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>');
    }

}

Jquery函数关闭div自行追加

3 个答案: