separate Gruppen von Bildern mit jQuery

Question

Ziel ist es, ein Bildkarussell mit 7 Bildern in einer Reihe zu erstellen. Ich lese Daten aus einer JSON-Datei. Das alles funktioniert gut.

Was ich nicht funktioniere, ist eine Schleife, die Gruppen von 7 Bildern getrennt voneinander trennt, wie im folgenden Beispiel gezeigt. Jeder Rat wird für diesen jQuery-Anfänger sehr geschätzt.

<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 

Ich habe versucht, mit zwei Dinge:

insert

$.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

Sie können die Funktionalität zum Ausführen eines Rückrufs für einen bestimmten Teil eines Arrays in eine Hilfsfunktion extrahieren.

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

Dies würde ermöglichen es Ihnen, die Logik der Aufspaltung von Daten in Portionen zu dem DOM aus dem Hinzufügen von Daten zu trennen:

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

Hier ist ein vollständiges Beispiel:

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>

Answer 2

Wenn ich Sie richtig verstehe, Sie versuchen, die Bilder in Gruppen zu trennen von 7. Um dies zu tun, sind Sie auf dem richtigen Weg mit Modulus.

Ich würde testen, um zu sehen, wenn Ihr Loop-Index Mod sieben gleich Null ist und dann eine Div-Gruppe anhängen. Überprüfen Sie den folgenden Code.

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

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

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

* edit: aktualisierten Code besser zu reflektieren, was Sie in Ihrem Beispiel hatte.