Question

我有一个引导旋转木马。如果窗口宽度超过400px，我需要在同一项目中显示所有内部div。但是如果窗口宽度小于400px，我需要显示每3个内部div 一个<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>

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

中正确包装

我需要的是如果窗口宽度小于400px然后前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

<强>观

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

完整代码：

＆＃13;

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

＆＃13;

.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%;
  }
}

＆＃13;

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

＆＃13;

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

2 个答案: