根据屏幕大小使用 jQuery 动态包装 div

Question

我有一个引导轮播。在这里，如果窗口宽度超过 400 像素，我需要在同一项目中显示所有内部 divs。但是如果窗口宽度小于400px，我需要显示每3个内部divs 一个<div class="item">。我有这个代码：

function item_wrap() {
  var width = $(window).width();
  console.log(width);
  if (width > 400) {
    $('.inner').unwrap();
    $('.inner').wrapAll('<div class="item active">');
  } else {

    $('.inner').unwrap();
    $('.inner:lt(3)').wrapAll('<div class="item active">');
    $('.inner:gt(2)').wrapAll('<div class="item">');
  }

}

item_wrap();

$(window).resize(function() {
  item_wrap();

});

.item {
  background: #ccc;
}
.active {
  color: red
}
.inner {
  float: left;
  width: 20%;
  border: 1px solid black;
  margin: 2px;
}
@media screen and (max-width: 400px) and (min-width: 300px) {
  .inner {
    width: 30%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">


    <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false">
      <div class="carousel-inner" role="listbox">
        <div>
          <div class="inner">1</div>
          <div class="inner">2</div>
          <div class="inner">3</div>
          <div class="inner">4</div>
          <div class="inner">5</div>
          <div class="inner">6</div>
          <div class="inner">7</div>
          <div class="inner">8</div>
          <div class="inner">9</div>
          <div class="inner">10</div>
          <div class="inner">11</div>
          <div class="inner">12</div>
        </div>
      </div>

      <a class="carousel-control left-carousel" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="display:block"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control right-carousel" href="#myCarousel" role="button" data-slide="next" style="background: inherit !important;display: block;height: auto;opacity: 0.5;right: -4%;">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

    </div>








  </div>
</div>

如果窗口宽度大于 400 像素，则它可以正常工作。但如果窗口宽度小于 400 像素，则前 3 个内部 div 显示正确 但其他内部 div 未正确包裹在 <div class="item"> 中

我需要的是，如果窗口宽度小于 400 像素，那么前 3 个内部 div 需要包裹在 <div class="item active"> 和所有其他 ecah 3 内部 div 需要包裹在<div class="item">.

即，如果窗口宽度小于400px我需要得到以下结构

 <div class="carousel-inner" role="listbox">
              <div>
              <div class="item-active">    
                <div class="inner">1</div>
                <div class="inner">2</div>
                <div class="inner">3</div>
               </div>  
               <div class="item">   
                <div class="inner">4</div>
                <div class="inner">5</div>
                <div class="inner">6</div>
               </div>
               <div class="item">   
                <div class="inner">7</div>
                <div class="inner">8</div>
                <div class="inner">9</div>
               </div>
               <div class="item">   
                <div class="inner">10</div>
                <div class="inner">11</div>
                <div class="inner">12</div>
               </div> 
              </div>
            </div>

请帮忙解决这个问题。

Answer 1

试试这个

<script type="text/javascript">
function item_wrap(){
    var width = $(window).width();
console.log(width);
if(width > 400) {
 $('.inner').unwrap();
 $('.inner').wrapAll('<div class="item active">');
} else {

 $('.inner').unwrap();
        var divs = $(".inner");
        for(var i = 0; i < divs.length; i+=3) {
            if(i===0){
                $('.inner:lt(3)').wrapAll('<div class="item active">');
            }
            else{
               divs.slice(i, i+3).wrapAll("<div class='item'></div>"); 
            }

        }


}

}

  item_wrap();

   $(window).resize(function(){
item_wrap();

});



   </script>

Answer 2

想法

这是有效的代码。这个想法是你在前三个之后循环遍历剩余的项目，一次取三个项目，并将它们包装到 div 中。然后取出接下来的三个并再次包裹它们，依此类推。

主要代码：

    for (var i = 0; i < others.length; i += 3) {
        var nextThree = [others[i], others[i+1], others[i+2]]'
        $(nextThree).wrapAll('<div class="item">');
    }

完整代码：

function item_wrap() {
  var width = $(window).width();
  console.log(width);
  if (width > 400) {
    $('.inner').unwrap();
    $('.inner').wrapAll('<div class="item active">');
  } else {

    $('.inner').unwrap();
    var firstThree = $('.inner:lt(3)');
    var others = $('.inner:gt(2)');
    $(firstThree).wrapAll('<div class="item active">');

    for (var i = 0; i < others.length; i += 3) {
        var nextThree = [others[i], others[i+1], others[i+2]]'
        $(nextThree).wrapAll('<div class="item">');
    }
    
  }

}

item_wrap();

$(window).resize(function() {
  item_wrap();

});

.item {
  background: #ccc;
}
.active {
  color: red
}
.inner {
  float: left;
  width: 20%;
  border: 1px solid black;
  margin: 2px;
}
@media screen and (max-width: 400px) and (min-width: 300px) {
  .inner {
    width: 30%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">


    <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false">
      <div class="carousel-inner" role="listbox">
        <div>
          <div class="inner">1</div>
          <div class="inner">2</div>
          <div class="inner">3</div>
          <div class="inner">4</div>
          <div class="inner">5</div>
          <div class="inner">6</div>
          <div class="inner">7</div>
          <div class="inner">8</div>
          <div class="inner">9</div>
          <div class="inner">10</div>
          <div class="inner">11</div>
          <div class="inner">12</div>
        </div>
      </div>

      <a class="carousel-control left-carousel" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="display:block"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control right-carousel" href="#myCarousel" role="button" data-slide="next" style="background: inherit !important;display: block;height: auto;opacity: 0.5;right: -4%;">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

    </div>








  </div>
</div>