jQueryを使ってHTMLを整理する：配列からスライスして各アイテムがある「items」の3行（imgs.lenght/3）を整理する方法

Question

イメージを3つの行に分割する3つのカルーセルを作成します。

これが私の現在のHTMLである：例えば×6

<img>。

<div class="car-cont"> 
    <img src="img.jpg"> 
    <img src="img.jpg"> 
    <img src="img.jpg"> 
    <img src="img.jpg"> 
    <img src="img.jpg"> 
    <img src="img.jpg"> 
</div> 

これは結果でなければなりません：

は

jQuery(document).ready(function(){ 

    // Adds this "animg" class in a div outside every img tag 
    jQuery(".car-cont > img").wrap("<div class='animg'></div>"); 

    // Calculates how many "items" should be in a row. for example if there are 6 items - there should be 2 items in a row of one carusele 
    var imgNums = jQuery('.animg').length; 
    imgNums = imgNums/3; 

    // Organize to Items - for every 7 images add the class item. 
    var theItems = jQuery(".car-cont > .animg"); 
    for(var i = 0; i < theItems.length; i+=7) { 
     theItems.slice(i, i+7).wrapAll("<div class='item'></div>"); 
    } 

    // Organize to Carusel containers (items) - split the items so there will be 2 items pear each row of carusel 
    var theCarusels = jQuery(".car-cont > .item"); 
    for (var c=0; c < theCarusels.length; c+=imgNums) { 
     theCarusels.slice(c, c+imgNums).wrap("<div class='carousel slide' id='myCarousel'><div class='carousel-inner'></div></div>"); 
    } 

    jQuery('.carousel-inner > .item:first').addClass('active'); 

    jQuery('.carousel').carousel({ 
     interval: 3000 
    }); 

}); 

問題がで起動：

<div class="carousel slide" id="myCarousel"> 

    <div class="carousel-inner"> 

     <div class="item"> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
     </div> 

     <div class="item"> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
     </div> 

    </div> 

</div> 

<div class="carousel slide" id="myCarousel"> 

    <div class="carousel-inner"> 


     <div class="item"> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
     </div> 

     <div class="item"> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
     </div> 
    </div> 
</div> 


<div class="carousel slide" id="myCarousel"> 

    <div class="carousel-inner"> 

     <div class="item"> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img-1.jpg" > 
      </div> 
     </div> 

     <div class="item"> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
      <div class="animg"> 
       <img class="alignnone" src="img.jpg" > 
      </div> 
     </div> 
    </div> 

</div> 

と、これは私のjQueryの一部である（私は慎重に確認してください各コード部分に、より説明しました） var theCaruselsステートメントの後のループ。

私が手：

と.wrapAllを使用してこの結果を与える：

Answer 1

と呼ばれている画像のコレクションの中に、個々のカルーセル画像アレイを分割するための第2の

私の問題は、この部分を使用して解決した。

// Organize to Carusel containers 
var theCarusels = jQuery(".car-cont > .item"); 
var carCount = theCarusels.length; 
carCount = carCount/3; 
for (var c=0; c < theCarusels.length; c+=carCount) { 
    theCarusels.slice(c, c+carCount).wrapAll("<div class='carousel slide' id='myCarousel'><div class='carousel-inner'></div></div>"); 
} 

私はforループの中で間違った変数を使用していました。 アイテム用に使用する代わりに、イメージ用に計算しました。

Answer 2

このソリューションは、わずかに異なるアプローチを使用してのペアに依存しているが、（減らす）メソッド。画像を分割し、必要なカルーセルにそれらを再フォーマットする方法を決定するための一つ、私はスライド

// ========================== 
 
// Generate a reducer based on imagesPerSlide 
 
// ========================== 
 
function getSlideReducer(imagesPerSlide){ 
 

 
    // ========================== 
 
    // Given an array of "images" return "items" 
 
    // appended to the accumulator (carousel-inner) 
 
    // ========================== 
 
    return function(acc, item, index, arr){ 
 
    var $slide = $("<div class=\"item\" />"); 
 

 
    arr 
 
     .splice(0, imagesPerSlide) 
 
     .forEach(function(item){ 
 
     $("<div class=\"animg\" />").append(item).appendTo($slide); 
 
     }); 
 

 
    $slide.appendTo(acc); 
 

 
    return acc; 
 
    }; 
 
    // ========================== 
 

 
} 
 
// ========================== 
 

 
// ========================== 
 
// Generate a reducer based on the number of images and expected carousels 
 
// also needed is a child reducer to process the individual slides in each 
 
// carousel 
 
// ========================== 
 
function getCarouselReducer(imagesPerCarouselFloor, slideReducer){ 
 

 
    // ========================== 
 
    // Given an array of images, slice up the array to distribute images 
 
    // evenly to the required number of carousels. 
 
    // once the slice of images is found for the current carousel, pass them 
 
    // to a child reducer for futher processing. 
 
    // ========================== 
 
    return function(acc, item, index, arr){ 
 
    var $carousel = $("<div class=\"carousel slide\" />"); 
 

 
    var grab = (arr.length % imagesPerCarouselFloor === 0) ? 
 
     imagesPerCarouselFloor : imagesPerCarouselFloor + 1; 
 

 
    arr 
 
     .splice(0, grab) 
 
     .reduce(slideReducer, $("<div class=\"carousel-inner\" />")) 
 
     .appendTo($carousel); 
 

 
    $carousel.appendTo(acc); 
 

 
    return acc; 
 
    }; 
 
    // ========================== 
 

 
} 
 
// ========================== 
 

 
// ========================== 
 
// find our target container with child images and 
 
// using a pair of reducers replace the child images 
 
// with a set of carousels 
 
// ========================== 
 
(function($, targetContainer, carouselCount, imagesPerSlide){ 
 
    var $targetContainer = $(targetContainer); 
 
    var images = Array.from($targetContainer.find("img")); 
 
    var imagesPerCarouselFloor = Math.floor(images.length/carouselCount); 
 

 
    var slideReducer = getSlideReducer(imagesPerSlide); 
 
    var carouselReducer = getCarouselReducer(imagesPerCarouselFloor, slideReducer); 
 

 
    images.reduce(carouselReducer, $targetContainer); 
 

 
    $targetContainer.find(".item:first-child").addClass("active"); 
 
    $targetContainer.find('.carousel').carousel({interval: 3000}); 
 
}(jQuery, ".car-cont", 3, 5)); 
 
// ==========================

.animg { float: left; padding: 0.25em; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <div class="car-cont"> 
 
     <img src="https://unsplash.it/g/50?image=0"> 
 
     <img src="https://unsplash.it/g/50?image=1"> 
 
     <img src="https://unsplash.it/g/50?image=2"> 
 
     <img src="https://unsplash.it/g/50?image=3"> 
 
     <img src="https://unsplash.it/g/50?image=4"> 
 
     <img src="https://unsplash.it/g/50?image=5"> 
 
     <img src="https://unsplash.it/g/50?image=6"> 
 
     <img src="https://unsplash.it/g/50?image=7"> 
 
     <img src="https://unsplash.it/g/50?image=8"> 
 
     <img src="https://unsplash.it/g/50?image=9"> 
 
     <img src="https://unsplash.it/g/50?image=0"> 
 
     <img src="https://unsplash.it/g/50?image=1"> 
 
     <img src="https://unsplash.it/g/50?image=2"> 
 
     <img src="https://unsplash.it/g/50?image=3"> 
 
     <img src="https://unsplash.it/g/50?image=4"> 
 
     <img src="https://unsplash.it/g/50?image=5"> 
 
     <img src="https://unsplash.it/g/50?image=6"> 
 
     <img src="https://unsplash.it/g/50?image=7"> 
 
     <img src="https://unsplash.it/g/50?image=8"> 
 
     <img src="https://unsplash.it/g/50?image=9"> 
 
     <img src="https://unsplash.it/g/50?image=0"> 
 
     <img src="https://unsplash.it/g/50?image=1"> 
 
     <img src="https://unsplash.it/g/50?image=2"> 
 
     <img src="https://unsplash.it/g/50?image=3"> 
 
     <img src="https://unsplash.it/g/50?image=4"> 
 
     <img src="https://unsplash.it/g/50?image=5"> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>