Question

我有一个json文件，其中包含许多图像的路径，我希望偶尔添加更多图像路径。我正在对此文件发出GET请求，并将图像添加到html页面。我遇到的问题是使用$.each方法是索引保持不变，这意味着每个图像在每一行中重复，但我想要做的是在每行中追加3个不同的图像。

我知道我可以放[index+1]等等。但是这不会扩展我拥有的图像。

我希望这是有道理的。如果没有让我知道，我可以提供更多细节。

请参阅以下代码。

HTML

<div class="portrait-page"></div>

JAVASCRIPT

$.get('json/categories.json', function( data ){
    $.each(data, function( index, value ) {
        $('.portrait-page .container').append( "<div class='grid'><div class='col-1-3'><img src='" + data[index].image + "''></div><div class='col-1-3'><img src='" + data[index].image + "''></div><div class='col-1-3'><img src='" + data[index].image + "''></div></div>");
    });
});

JSON文件

[
    {"image":"images/geysir.jpg"},
    {"image":"images/burren.jpg"},
    {"image":"images/cuba.jpg"},
    {"image":"images/london.jpg"},
    {"image":"images/vegas.jpg"},
    {"image":"images/cliff.jpg"},
    {"image":"images/timbaland.jpg"},
    {"image":"images/burren.jpg"},
    {"image":"images/che.jpg"}
]

CSS

[class*='col-'] {
    float: left;
}
.col-1-3 {
    width: 33.33%;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[class*='col-'] {
    padding: 5px 5px 0 5px;
}
.col-1-3 img {
    width: 100%;
    height: 300px;
}

Answer 1

您可以这样做：

$.each(data, function( index, value ) {
    if((index + 1) % 3 == 0){
       $('.portrait-page').append( "<img src=" + data[index-2].image + "><img src='" + data[index-1].image + "><img src=" + data[index].image + ">");
    }
});

OR

for(var i = 0; i < data.length - 3; i+=3){
   $('.portrait-page').append( "<img src=" + data[i].image + "><img src='" + data[i+1].image + "><img src=" + data[i+2].image + ">");
}

Answer 2

如果你每次迭代都会拍多张图片，那么你不想要$.each，你想要自己的循环。

您可能会这样做：

如果您知道 data.length将是3的完全倍数：

$.get('json/categories.json', function( data ){
    var container = $(".portrait-page .container");
    var markup;
    var index = 0;
    while (index < data.length) {
        markup = "<div class='grid'>";
        for (var n = 0; n < 3; ++n) {
            markup += "<div class='col-1-3'><img src='" + data[index++].image + "'></div>";
        }
        markup += "</div>";
        container.append(markup);
    }
});

如果你不这样做，我们只需要输入if：

$.get('json/categories.json', function( data ){
    var container = $(".portrait-page .container");
    var markup;
    var img;
    var index = 0;
    while (index < data.length) {
        markup = "<div class='grid'>";
        for (var n = 0; n < 3; ++n) {
            if (index < data.length) {
                img = "<img src='" + data[index++].image + "'>";
            } else {
                img = "";
            }
            markup += "<div class='col-1-3'>" + img + "</div>";
        }
        markup += "</div>";
        container.append(markup);
    }
});

示例：

＆＃13;

var data = JSON.parse(
  '[' +
  '{"image":"one"},' +
  '{"image":"two"},' +
  '{"image":"three"},' +
  '{"image":"four"},' +
  '{"image":"five"},' +
  '{"image":"six"},' +
  '{"image":"seven"}' +
  ']'
);
var container = $(".portrait-page .container");
var markup;
var img;
var index = 0;
while (index < data.length) {
  markup = "<div class='grid'>";
  for (var n = 0; n < 3; ++n) {
    if (index < data.length) {
      img = "[img src='" + data[index++].image + "']";
    } else {
      img = "";
    }
    markup += "<div class='col-1-3'>" + img + "</div>";
  }
  markup += "</div>";
  container.append(markup);
}

＆＃13;

div.col-1-3 {
  display: inline-block;
}

＆＃13;

<div class="portrait-page">
  <div class="container"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

由于您似乎只是将json文件中的所有图像渲染到.portrait-page元素中，因此您的循环应如下所示：

var $container = $('.portrait-page');
$.get('json/categories.json', function( data ){
    $.each(data, function( index, value ) {
        $container.append( "<img src=" + value.image + " />");
    });
});

如果出于某种原因想要分批渲染它们，你应该这样做：

var $container = $('.portrait-page');
$.get('json/categories.json', function( data ){
    for(var i = 0; i < data.length - 3; i+=3){
        var $grid = $('<div />').addClass('grid');
        $grid.append( "<img src=" + data[i].image + " />")
             .append( "<img src=" + data[i+1].image + " />")
             .append( "<img src=" + data[i+2].image + " />")
             .appendTo($container);
    });
});

Answer 4

不要使用此

$('.portrait-page').append( "<img src=" + data[index].image + "><img src='" + data[index].image + "><img src=" + data[index].image + ">");

你必须使用价值而非数据来获取价值
只需给出console.log并查看value.image中的内容以获得更好的想法

   $('.portrait-page').append( "<img src=" + value.image + "><img src='" + value.image + "><img src=" + value.image + ">");

Answer 5

使用$.each完全没有错，index也应该很好地增加。

由于您无论如何都需要创建DOM，您可以在循环中执行它，只需使用%运算符来检查每三个项目。如果它是第3项，请将完整行添加到包装器并为新行创建新的DOM对象。

<强>的jQuery

var $htmlEl = $('.portrait-page');
var $rowEl = $('<div class="grid"></div>');
$.each(data, function(index, value) {
  $rowEl.append('<div class="col-1-3"><img src="' + value.image + '" /></div>');
  if (((index + 1) % 3) === 0) {
    $htmlEl.append($rowEl);
    $rowEl = $('<div class="grid"></div>');
  }
});

完整的小提琴： https://jsfiddle.net/wtg1trjn/1/

Answer 6

这看起来像是for循环的作业：

for(var i = 0; i < data.length - 1; i++){
   $('.portrait-page').append( "<img src=" + data[i].image + ">");
}

在每个循环jQuery / javascript中递增索引

6 个答案: