Jquery函数自行关闭div答案

【问题标题】：Jquery function closing div on append by itselfJquery函数自行关闭div
【发布时间】：2013-03-23 18:36:31
【问题描述】：

我有以下功能：

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

【问题讨论】：

为什么不把它变成一个字符串然后附加那个字符串
除了问题：使用像Handlebars这样的js模板引擎会更具可读性。

标签： javascript jquery asp.net

【解决方案1】：

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

所以当你这样做时：

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

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

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

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

【讨论】：

【解决方案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(''));
}

【讨论】：

【解决方案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>');
    }

}

【讨论】：