Question

目标是创建一个连续7张图像的图像轮播。我正在读取json文件中的数据。一切正常。

我没有工作的是一个循环，它将7个图像组分开，如下例所示。对于这个jQuery-beginner，非常感谢任何建议。

<div class='active item'>
Image-1
Image-2
Image-3
Image-4
Image-5
Image-6
Image-7
</div>
<div class='item'>
Image-8
Image-9
Image-10

我试过两件事：

的insertBefore

$.each(data.items, function(index, element) {
  var myString = $('<div></div>');
  if (index % 7 == 0) {
    $("<p>Test</p>").insertBefore(".span2");
  }
  myString.append($('<div class="span2">')
    .append($("<a href=" + index + " class='thumbnail'>"))
      .append("<img src=http://0.0.0.0:3000/images/col/tn/" + element.imgf + " alt='Image' style='max-width:100%;'/>")));
  myString.appendTo('#show-carousel');

if / else

$.each(data.items, function(index, element){
                var myString = $('<div></div > ');
if (index % 7 == 0) {
   myString.append("<div class='item'>");
   myString.append($("<div class='row-fluid'>")
     .append($(' < div class="span2"> ')
       .append($("<a href="+index+" class='thumbnail'>")
         .append("<img src=http://0.0.0.0:3000/images/col/tn/"+element.imgf+" alt='Image' style='max-width: 100%;'/>"))));
} 
else {
   myString.append($('<div class="span2">')
     .append($("<a href="+index+" class='thumbnail'>")
       .append("<img src=http://0.0.0.0:3000/images/col/tn/"+element.imgf+" alt='Image' style='max-width: 100%;'/>")));
}
myString.appendTo('#show-carousel');

Answer 1

如果我理解正确，你试图将图像分成7组。为此，你使用模数处于正确的路径上。

我会测试你的循环索引mod 7何时等于零，然后附加一个div组。看看下面的代码。

＆＃13;

var $carousel = $('#show-carousel'),
  $item,
  myArr = [],
  i;

// populate our array with some fake data.
for (i = 0; i < 15; i++) {
  var imgInfo = {
    imgf: 'image' + (i + 1) + '.jpg'
  };
  myArr.push(imgInfo);
}

//  loop through the array and add your items to your element
$.each(myArr, function(index, obj) {
  if (index % 7 === 0) {
    // create a div that will hold your images
    $item = $('<div class="item"></div>');
    // append this div to our carousel element
    $carousel.append($item);
  }
  // $item is a reference to the last created div
  $item.append('<div class="span2"><a href="' + index + '" class="thumbnail"><img src="http://0.0.0.0:3000/images/col/tn/' + obj.imgf + '" alt="Image" style="max-width:100%;"></a></div>');
});

$('.item:eq(0)').addClass('active');

＆＃13;

#show-carousel .item {
  display: none;
  padding: 5px;
  margin: 5px;
  border: 1px solid red;
}
#show-carousel .item.active {
  display: block;
}
#show-carousel .item .span2 {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-carousel"></div>

＆＃13;

*编辑：更新的代码，以更好地反映您的示例中的内容。

Answer 2

您可以将对数组的某个部分执行回调的功能提取到辅助函数中。

// function that executes a callback for a portion of an array
function forEachArrayGroup(arr, start, end, fn) {
  if (end > arr.length) end = arr.length; // normalize for out of bounds 
  for (let i = start; i < end; i++) {
    fn(arr[i], i);
  }
}

这将允许您将数据拆分为将数据添加到DOM中的部分：

for (let i = 0; i < items.length; i += 7) {

  // we create an item that will hold the portion
  const $item = $('<div class="item"></div>');

  // append the group to the current item
  forEachArrayPortion(items, i, i + 7, function(dataItem, index) {
    // this executes for each item in the group

    const $imgWrapper = // create the a, img and rest

    $item.append($imgWrapper);
  });
}

以下是一个完整的例子：

const data = { items: Array.from({ length: 18 }, (_, i) => i).map(() => ({ imgf: 'i_am_fake' })) };

function forEachArrayGroup(arr, start, end, fn) {
  if (end > arr.length) end = arr.length; // normalize for out of bounds 
  for (let i = start; i < end; i++) {
    fn(arr[i], i);
  }
}

function displayItemsInGroups(items, groupSize) {

  for (let i = 0; i < items.length; i += groupSize) {
    // this executes for each group of `partSize` number of items

    // we create an item that will hold the group
    const $groupItem = $('<div class="item"></div>');

    // make sure the first item is active
    if (i === 0) {
      $groupItem.addClass('active');
    }

    // create the row that will contain the image groups
    const $groupRow = $("<div class='row-fluid'>");

    // add group row to the current item
    $groupRow.appendTo($groupItem);

    // add current item to the carousel
    $groupItem.appendTo('#show-carousel');

    // append the group to the current row
    forEachArrayGroup(items, i, i + groupSize, function(dataItem, index) {
      // this executes for each item in the group

      const $imgWrapper = $('<div class="span2">')
        .append($("<a href=" + index + " class='thumbnail'>")
          // fake image
          .append("<div class="+dataItem.imgf+">Image "+(index+1)+"</div>"));

      $groupRow.append($imgWrapper);
    });
  }
}

displayItemsInGroups(data.items, 7);

.item {
  padding: 10px;
  border: 1px solid #aaa;
  margin-bottom: 1px;
}

.item.active {
  border-color: #018bbc;
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="show-carousel"></div>

使用jQuery分隔图像组

2 个答案: