jQuery使用来自json的数据向dom追加新元素

您好，我正在编写一个脚本，从一些json中读取数据

我想做几件事：

循环遍历数据并添加包含json中数据的新

我想每行有3个项目

这是我第一次尝试使用这种向dom添加div的方法 我想生成行（我附加的json示例数据只有一个条目） 我预期的html结构如下所示： （页面上已存在relatedDetails和相关标题div

<div class="relatedDetails">
    <div class="relatedHeader">Unit Bases near by:</div>
    <div class="detailRow">
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
    </div>
    <div class="detailRow">
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
    </div>
</div>

我已经编写了一些jquery来解析这些数据并创建上面的结构，但它并没有将div添加到dom中

不确定这是否与我如何使用变量访问类有关，因此我知道我也要附加哪一行/相关项

，或者其他内容

我的jquery如下所示：

function createRelated(myRelated){
        alert('create related')
        console.log(myRelated);
        var relCount = 0;
        var rowCount = 0;
        var itemCount = 0;
        $.each(myRelated, function() {
            if(relCount == 3){
                relCount = 0;
            };
            // create a new row
            if(relCount = 0){
                var rowClass = 'relRow'+rowCount;
                $("<div/>",{
                    "class": "detailRow "+rowClass
                }).appendTo( ".relatedDetails" );
                rowCount++;
            }
            // create a new related item div
            var itemClass = 'item'+itemCount;
            $("<div/>",{
                "class": "relatedItem "+itemClass,
            }).appendTo(rowClass);

            //add the data to the related item
            $(itemClass).data('location',this);
            //add item to to our row
            $(rowClass).append(itemClass);
            // now loop through the keys and values and add the data
            $.each(this, function(k, v) {
                //add divs to the related item div          
                });
            itemCount++;
            relCount++;
        });
    };

函数createRelated（myRelated）{
警报（'创建相关'）
console.log（myRelated）；
var-relCount=0；
var rowCount=0；
var itemCount=0；
$.each（myRelated，function（）{
如果（relCount==3）{
relCount=0；
};
//创建新行
如果（relCount=0）{
var rowClass='relRow'+rowCount；
$("",{
“类”：“详细行”+行类
}).附录（“相关详情”）；
行计数++；
}
//创建一个新的相关项div
var itemClass='item'+itemCount；
$("",{
“类别”：“相关项目”+项目类别，
}).appendTo（rowClass）；
//将数据添加到相关项
$（itemClass）.data（'location'，this）；
//将项目添加到我们的行
$（rowClass）.append（itemClass）；
//现在循环遍历键和值并添加数据
$。每个（此，函数（k，v）{
//将div添加到相关项div
});
itemCount++；
relCount++；
});
};

测试页面位于：

*更新* 我在这里创建了一个js小提琴：

---

div没有被创建，我不知道为什么：（

在示例代码中，您从未将新行（）附加到文档中。生成完所有元素后，您需要获取一个指向要插入到文档中的点的引用，并将新行附加到文档中：

$(rowClass).appendTo("#WhereIWantMyData");

---

在HTML中有一些id为=“WhereIWantMyData”的元素，您希望将数据插入其中。

事实证明我非常愚蠢

if(relCount = 0){
    //do stuff
}

应该是

if(relCount == 0){
    //do stuff
}

---

嗯……是的，他确实这样做了……当他第一次创建行时，他将行附加到

。relatedDetails

哪里？我没有看到。我看到他创建行，然后创建数据，然后将数据附加到行。他从不将行附加到任何东西。

$（“”，{“class”：“detailRow”+rowClass}）。appendTo（“.relatedDetails”）；

第二个if语句，就在注释

//创建一个新行的下方

注意

。appendTo

我确实看到了另一个问题，如果我有3行以上，我将有1行以上的

。rowclass0

我认为我可以解决这个问题，尽管这让我很困惑，为什么没有div应用于dom。我的testpage在

if(relCount == 0){
    //do stuff
}