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

Question

我有一个 bootstrap 轮播。这里如果 window 宽度超过 400px，我需要在同一项目中显示所有内部 div。但是如果 window 宽度小于 400px，我需要显示每 3 个内部 divs in 一个 <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>

如果 window 宽度大于 400px，它工作正常。但是，如果 window 宽度小于 400px，则前 3 个内部 div 显示正确但其他内部 div 未正确包装在 <div class="item">

中

what i need is if in window width less than 400px then first 3 inner div is need wrap in <div class="item active"> and all other ecah 3 inner div is need to wrap in <div class="item">.

即，如果 window 宽度小于 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

想法

这是有效的代码。这个想法是在前三个之后循环遍历剩余的项目，一次取三个项目，并将它们包装到 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>

Answer 2

试试这个

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

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

Wrap a div dynamically using jQuery depending on screen size

javascript

jquery

jquery-ui

jquery-plugins