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

我有一个json文件，其中包含许多图像的路径，我希望偶尔添加更多图像路径。我正在向该文件发出

GET

请求，并将图像添加到html页面。我遇到的问题是使用

$。每个

方法都是索引保持不变，这意味着每行中的每个图像都是重复的，但是我想做的是在每行中附加3个不同的图像

我知道我可以放置

[index+1]

等。但是这不会缩放我拥有的更多图像

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

请参阅下面的代码

HTML

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

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

---

您可以这样做：

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

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

$。每个（数据、函数（索引、值）{
如果（（索引+1）%3==0）{
$（“.肖像页”）。附加（“”）；
}
});

或

for（变量i=0；i

如果要在每次迭代中生成多个图像，则不需要

$。每个

都需要自己的循环

您可以这样做：

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

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

如果您知道

数据。长度将是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);
    }
});

例如：


var data=JSON.parse(
'[' +
“{”图像“：“一”}，”+
“{”图像“：“两个”}，'+
“{”图像“：“三”}，'+
“{”图像“：“四”}，'+
“{”图像“：“五”}，'+
“{”图像“：“六”}，”+
“{”图像“：“七”}”+
']'
);
var container=$（“.patrait page.container”）；
var加成；
var-img；
var指数=0；
while（索引<数据长度）{
加价=”；
对于（变量n=0；n<3；++n）{
if（索引<数据长度）{
img=“[img src=”+数据[index++].image+“]”；
}否则{
img=“”；
}
标记+=“”+img+“”；
}
标记+=“”；
container.append（标记）；
}
div.col-1-3{
显示：内联块；
}
这看起来像是
for
循环的作业：

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

for（var i=0；i
由于您似乎只是将json文件中的所有图像渲染到
纵向页面
元素中，因此您的循环应该如下所示：

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

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

var$container=$（'.tartic page'）；
$.get（'json/categories.json'，函数（数据）{
$.each（数据、函数（索引、值）{
$container.append（“”）；
});
});

如果出于某种原因，您希望以3批为一批渲染它们，则应执行以下操作：

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

var$container=$（'.tartic page'）；
$.get（'json/categories.json'，函数（数据）{
对于（变量i=0；i
不要用这个

$('.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 + ">");

$（“.肖像页”）。附加（“”）；
使用
$没有什么错。每个
都应该增加
索引

因为您仍然需要创建DOM，所以可以在循环中进行，只需使用
%
操作符检查第三个项目。如果是第三项，则将完整的行添加到包装器中，并为新行创建一个新的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>');
  }
});

var$htmlEl=$（'.tartic page'）；
变量$rowEl=$（''）；
$.each（数据、函数（索引、值）{
$rowEl.附加（“”）；
如果（（索引+1）%3）==0）{
$htmlEl.append（$rowEl）；
$rowEl=$（''）；
}
});

和完整的Fiddle:
索引将自动递增，请尝试数据[0]，，可能是您的数据包含一个数组元素，该数组元素具有多个图像元素当您在标记中不执行任何实际按三分组的操作时，您为什么要以三个一组的方式追加它们？为什么不一次一个？@phantom:为什么你不能一个接一个地追加。这也会做同样的事情。为什么要使用
$。每个
？只需在一个简单的
for
循环中使用
index+=3
incrementer进行迭代，不清楚您想要实现什么。。。为什么“3”是个神奇的数字？它是动态的吗？@T.J.Crowder我还没有测试过它，但我不确定它为什么不起作用。@T.J.Crowder我不认为它会跳过第一个索引，因为我使用的是
（index+1）%3
这个条件第一次是
真的
是
索引将是
2
@T.J.Crowder是的，但
（2+1）%3==0
是真的，我使用的是
索引-2、索引-1和索引
，这意味着
0、1、2
。啊，我知道你在那里做什么了。它们分为三组，因为有一个三列grid@phantom：可能有CSS在做这件事，但您显示的标记中没有任何内容。如果CSS或类似的东西有，您不需要将它们以三人一组的形式追加。您的代码只需添加三次
，然后再添加三次，但这与分别添加六次
是一样的（不同的是浏览器的工作量稍大，这不太重要）。我希望它们作为三列网格，但每行都要添加三次相同的图像，但我想在每次更新问题时更改图像，这可能更有意义now@phantom：更新了答案。：-）这和以前做的一样，显示的一样image@phantom，这将呈现json文件中的所有图像，无需重复
“”
部分，也无需触摸
索引
var.@phantom检查我答案的后半部分