javascript - 使用 jQuery : How to slice from an array and organize 3 rows (imgs. 长度/3) 组织 HTML "items"，其中每个项目都有

Question

我想创建 3 个轮播，将图像分成三行。

这是我当前的 HTML:

<img>例如，x 6。

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

这应该是结果:

<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 部分(我在每个代码部分中解释了更多内容，请仔细查看):

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

});

问题开始于 var theCarusels 之后的循环中陈述。

我得到:

并使用 .wrapAll给出这个结果:

Answer 1

此解决方案使用稍微不同的方法，并依赖于一对 reduce() 方法。第一个确定如何分割图像并将它们重新格式化为所需的轮播，第二个将各个轮播图像数组分割为我称为幻灯片的图像集合幻灯片

// ==========================
// 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>