Question

我使用for循环生成动态div，我对输出感到惊讶。代码如下：

for(continent in CityList)
{
  $('<div id="'+continent+'Display"><div class="row top-buffer">').appendTo('#Display');

      currentcontinent = CityList[continent];

   for(city in currentcontinent) {

   $('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#Display');
   }

   $('</div></div>').appendTo('#Display');
}

输出html使用

alert($("div#Display").clone().html());

是：

<div id="AmericaDisplay"><div class="row top-buffer"></div></div><div class="col-md-4"><div     class="thumbnail"><div class="caption"><h3>Boston</h3><a data-name="Boston" href="#Boston"> <img src="undefined" style="min-height:250px;height:250px;"></a></div></div></div>...

正如您所看到的，在第一次追加后有两个</div></div>，但我希望那些在html的末尾，因为我在for循环中称它们为最后一个。循环是否有任何理由像这样？

Answer 1

当您使用jQuery解析标记时，它会创建一个DOM对象，其中也包括结束标记。如果您希望$('<div class="col-md-4"><div class="thumbnail">...进入$('<div id="'+continent+'Display"><div class="row top-buffer">')，则需要将其附加到'#' + continent + 'Display'，如下所示：

$('<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>').appendTo('#' + continent + 'Display');

另外，摆脱$('</div></div>').appendTo('#Display');，用jQuery解析元素时没有任何意义。

Answer 2

代码$('<div id="Display"><div class="row top-buffer">')将创建jquery对象，因此如果你追加它，html将如下所示

<div id="Display">
    <div class="row top-buffer">
    </div>
</div>

如果你想在最后添加</div></div>，那么将所有html保存在变量中并将其追加到最后

for(continent in CityList){
    var data = '<div id="'+continent+'Display"><div class="row top-buffer">';
    currentcontinent = CityList[continent];
    for(city in currentcontinent) {
        data += '<div class="col-md-4"><div class="thumbnail"><div class="caption"><h3>'+CityList[continent][city]['EngName']+'</h3><a data-name="'+city+'" href="#'+city+'"> <img  src="'+CityList[continent][city]['src']+'" style="min-height:250px;height:250px;"/></a></div></div></div>'
    }

    data += '</div></div>';
    $(data).appendTo('#Display'); // or ('#Display').append(data);
}

循环中的执行顺序 - jQuery

2 个答案: