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>" );
        }
    }

这将生成如下HTML：

<div id="divMain">
    <div class="column_1 ui-sortable">
        <div class="widget_9">
            <div class="widget_content_9"></div>
            <div class="widget_content_9"></div>
        </div>
    </div>
    <div class="column_2 ui-sortable">
        <div class="widget_9">
            <div class="widget_content_9"></div>
        </div>
    </div>
    <div class="column_3 ui-sortable">
        <div class="widget_58">
            <div class="widget_content_58"></div>
        </div>
    </div>
</div>

当JSON数据如下所示时：

{
    "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
        }
    ]
}

所以基本上，我应该只看到基于JSON数据的每列1个小部件，这很好，但是出于某种原因，我在第一列小部件中得到了2个内容。。。
知道为什么吗？

最佳答案

jQuery函数在使用$("...")选择元素时搜索整个文档。在您的例子中，在第二次迭代中有两个.widget_9元素，每个元素都附加了一个<div>元素。
您需要的只是附加到刚刚创建的元素，这可以通过.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);

$widget在每次迭代中都会被一个新元素覆盖，因此您不会弄乱上一次迭代的元素。
注意，jQuery知道如何用$("<div>")创建元素，因此不需要结束标记。您还应该将i声明为var i。

关于html - 遍历JSON数据无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13251983/