Javascript 循环内部的执行顺序-jQuery

我正在使用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的末尾，因为我在for循环中最后调用了它们。循环有这样的行为吗？

当使用jQuery解析标记时，它会创建一个DOM对象，其中也包括结束标记。如果您希望

$（'…

进入

$（''）

内部，则需要将其附加到

'#'+大陆+“显示”

中，如下所示：

$('<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');

$（''+城市列表[大陆][城市]['EngName']+''）。附加到（'#'+大陆+'Display'）；

---

另外，去掉

$（''）。附加到（'#Display'）；

，它在使用jQuery解析元素时没有任何作用。

使用jQuery解析标记时，它会创建一个DOM对象，其中也包括结束标记。如果希望

$（'.

进入

$（''）

您需要将其附加到

“#”+大陆+“显示”

如下：

$('<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');

$（''+城市列表[大陆][城市]['EngName']+''）。附加到（'#'+大陆+'Display'）；

---

另外，去掉

$（''）。附加到（'#Display'）；

，它在使用jQuery解析元素时没有任何作用。

使用jQuery解析标记时，它会创建一个DOM对象，其中也包括结束标记。如果希望

$（'.

进入

$（''）

您需要将其附加到

“#”+大陆+“显示”

如下：

$('<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');

$（''+城市列表[大陆][城市]['EngName']+''）。附加到（'#'+大陆+'Display'）；

---

另外，去掉

$（''）。附加到（'#Display'）；

，它在使用jQuery解析元素时没有任何作用。

使用jQuery解析标记时，它会创建一个DOM对象，其中也包括结束标记。如果希望

$（'.

进入

$（''）

您需要将其附加到

“#”+大陆+“显示”

如下：

$('<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');

$（''+城市列表[大陆][城市]['EngName']+''）。附加到（'#'+大陆+'Display'）；

另外，去掉

$（''）.appendTo（'#Display'）；

，它在用jQuery解析元素时没有任何作用。

代码

$（''）

将创建jQuery对象，因此如果附加它，html将如下所示

<div id="Display">
    <div class="row top-buffer">
    </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);
}

for（城市列表中的大陆）{
var数据=“”；
当前大陆=城市列表[大陆]；
对于（欧洲大陆的城市）{
数据+=''+城市列表[大陆][城市]['EngName']+''
}
数据+=''；
$（数据）.appendTo（'#Display'）；//或（'#Display'）.append（数据）；
}

代码

$（“”）

将创建jquery对象，因此如果附加它，html将如下所示

<div id="Display">
    <div class="row top-buffer">
    </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);
}

for（城市列表中的大陆）{
var数据=“”；
当前大陆=城市列表[大陆]；
对于（欧洲大陆的城市）{
数据+=''+城市列表[大陆][城市]['EngName']+''
}
数据+=''；
$（数据）.appendTo（'#Display'）；//或（'#Display'）.append（数据）；
}

代码

$（“”）

将创建jquery对象，因此如果附加它，html将如下所示

<div id="Display">
    <div class="row top-buffer">
    </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);
}

for（城市列表中的大陆）{
var数据=“”；
当前大陆=城市列表[大陆]；
对于（欧洲大陆的城市）{
数据+=''+城市列表[大陆][城市]['EngName']+''
}
数据+=''；
$（数据）.appendTo（'#Display'）；//或（'#Display'）.append（数据）；
}

代码

$（“”）

将创建jquery对象，因此如果附加它，html将如下所示

<div id="Display">
    <div class="row top-buffer">
    </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);
}

for（城市列表中的大陆）{
var数据=“”；
当前大陆=城市列表[大陆]；
对于（欧洲大陆的城市）{
数据+=''+城市列表[大陆][城市]['EngName']+''
}
数据+=''；
$（数据）.appendTo（'#Display'）；//或（'#Display'）.append（数据）；
}

进一步解释：José正试图使用

.appendTo（）

替换

.innerHTML+=…

，而实际上它正在向所选节点添加一个完整的子节点。非常感谢您的回答，我对现在发生的事情有了更好的理解。为了进一步解释：José正试图使用

.appendTo（）

替换

.innerHTML+=…

，而实际上它正在将整个子节点添加到所选节点中。非常感谢您的回答，我对现在发生的事情有了更好的理解。为了进一步解释：José正试图使用

.appendTo（）

替换

.innerHTML+=…

，而实际上它正在将整个子节点添加到所选节点中。非常感谢您的回答，我对现在发生的事情有了更好的理解。为了进一步解释：José正试图使用

.appendTo（）

替换

.innerHTML+=…

，而实际上它正在将整个子节点添加到所选节点中。非常感谢您的回答，我对现在发生的事情有了更好的理解。请小心，在不经意间推荐使用全局变量时，忽略了

数据
变量的
var
关键字。您不希望创建这样的全局
数据
变量。当您你最不希望这样。小心不要无意中推荐使用全局变量，因为你的
数据
变量省略了
var
关键字