Html 在JSON数据中循环未按预期工作

我有以下脚本，它的行为与我期望的不一样：

success: function( widget_shell ) 
{ 
    if( widget_shell.d[0] ) {
        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {
           $( ".column_" + widget_shell.d[i].column_id ).append( "<div class='widget_" + widget_shell.d[i].widget_id + "'>" );
           $( ".widget_" + widget_shell.d[i].widget_id ).append( "<div class='widget_content_" + widget_shell.d[i].widget_id + "'>" );
           $( ".widget_" + widget_shell.d[i].widget_id ).append( "</div>" );
           $( ".column_" + widget_shell.d[i].column_id ).append( "</div>" );
        }
    }

所以基本上，基于JSON数据，我应该每列只看到一个小部件，这很好，但出于某种原因，我在第一列小部件中得到了两个内容

---

知道为什么吗？

当使用

$（“…”）

选择元素时，jQuery函数搜索整个文档。在您的例子中，在第二次迭代中有两个

.widget\u9

元素，每个元素都附加了一个

您需要的只是附加到刚创建的元素，这可以通过

完成。appendTo

：

var $widget = $("<div class='widget_" + widget_shell.d[i].widget_id + "'>")
                .appendTo(".column_" + widget_shell.d[i].column_id);

$("<div class='widget_content_" + widget_shell.d[i].widget_id + "'>")
  .appendTo($widget);

var$widget=$（“”）
.appendTo（“.column\uu”+widget\u shell.d[i].column\u id”）；
$("")
.appendTo（$widget）；

$widget

在每次迭代中都会被一个新元素覆盖，因此您不会弄乱上一次迭代的元素

---

请注意，jQuery知道如何使用

$（“”）

创建元素，因此不需要结束标记。您还应该声明

i

，如

var i

中所述，调试良好，+1。可能值得一提的是

i

这件事，而不需要或想要

附加（“”

）。

{
    "d": [
        {
            "__type": "Widget_Shell",
            "column_id": 1,
            "widget_id": 9
        },
        {
            "__type": "Widget_Shell",
            "column_id": 2,
            "widget_id": 9
        },
        {
            "__type": "Widget_Shell",
            "column_id": 3,
            "widget_id": 58
        }
    ]
}

var $widget = $("<div class='widget_" + widget_shell.d[i].widget_id + "'>")
                .appendTo(".column_" + widget_shell.d[i].column_id);

$("<div class='widget_content_" + widget_shell.d[i].widget_id + "'>")
  .appendTo($widget);