Question

我是Jquery的新手。现在我需要使用$ .each函数显示Json字符串值。

var MyJson = [
{
    "ImageId": "101",
    "ImageURL": "../../uploads/1.jpg",
    "ImageName": "1.jpg"
},
{
    "ImageId": "102",
    "ImageURL": "../../uploads/2.jpg",
    "ImageName": "2.jpg"
},
{
    "ImageId": "103",
    "ImageURL": "../../uploads/3.jpg",
    "ImageName": "3.jpg"
},
{
    "ImageId": "104",
    "ImageURL": "../../uploads/4.jpg",
    "ImageName": "4.jpg"
},
{
    "ImageId": "105",
    "ImageURL": "../../uploads/5.jpg",
    "ImageName": "5.jpg"
}
        ];

我的Json字符串在上面可用，我需要显示每个图像一次。

var $template = $('.pics');

        $(MyJson).each(function () {

            var innerDiv = document.createElement('div');
            innerDiv.className = 'pics';
            GalleryPics.appendChild(innerDiv);
            $(".pics").each(function (i) {
                $(this).append("<a href='" + MyJson[i].ImageURL + "' rel='lightbox-journey'><img src='" + MyJson[i].ImageURL + "' width='150' height='150' /></a>");
            });
        });

使用此代码，我可以显示所有图像，第一张图像显示5次，第二张图像显示4次，依此类推。所以请帮我避免重复并显示所有图像。

提前致谢..

Answer 1

您继续使用$(".pics")，其中包含所有具有该类名的div。

将锚标记附加到您创建的div，而不是所有具有pics类的div。

Answer 2

以这种方式尝试：

<强> JS

$(MyJson).each(function (obj) {
    $("#GalleryPics").append("<div class='pics'><a href='" + obj.ImageURL + "' rel='lightbox-journey'><img src='" + obj.ImageURL + "' width='150' height='150' /></a></div>");
});

<强> HTML

<div id="GalleryPics"></div>

http://jsfiddle.net/EcC9C/

Answer 3

//Here it is looping 5 times, because you have 5 objects in your array
        $(MyJson).each(function () {
//Here it is looping over all your .pics elements.
        $(".pics").each(function (i) {
            $(this).append("<a href='" + MyJson[i].ImageURL + "' rel='lightbox-journey'><img src='" + MyJson[i].ImageURL + "' width='150' height='150' /></a>");
        });
    });

我不能确定你需要什么，因为我不知道.pics元素的数量是否与json中的对象数量相同。你只需要一个循环。类似下面的东西。除非你应该退出，如果我＆gt; MyJson.length。

 $(".pics").each(function (i) {
            $(this).append("<a href='" + MyJson[i].ImageURL + "' rel='lightbox-    journey'><img src='" + MyJson[i].ImageURL + "' width='150' height='150' /></a>");
});

很多时候使用$ .each函数循环时会出现什么价值？

3 个答案: