13

我有以下功能：

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>所以所有页面都被搞砸了

4

3 回答 3

10

您不能将不完整的 HTML 片段附加到.append(). 与 不同document.write的是，jQuery 的.append()方法在将传递的字符串附加到 DOM 之前将其解析为元素。

所以当你这样做时：

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

jQuery 将给定的字符串解析为一个div元素并将car-offers值分配给它的className属性，然后将新创建的元素附加到该#result元素。

在单个操作中附加整个 HTML 字符串将解决这个问题，因此 jQuery 知道如何正确解析给定的字符串。

就个人而言，我不建议在 JS 文件中放入那么多 HTML。您可以考虑将其放在divwith中，display:none然后简单地调用.show()它。或者最初在页面中，.detach()它存储在一个变量中，并.append()在必要时返回。

于 2013-04-02T12:52:47.910 回答
8

您可以使用带有连接的数组来解决这个问题

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(''));
}
于 2013-04-02T12:55:06.233 回答
1

这也是我刚刚遇到的问题。一个选项是首先在循环中创建 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>');
    }

}
于 2014-04-01T10:11:43.337 回答