时间戳

首页 > 解决方案 > 分离和附加元素，直到没有溢出 - jQuery

javascript - 分离和附加元素，直到没有溢出 - jQuery

问题描述

我正在尝试detach()从其父元素（zone-col）添加一个元素并附加到下一个元素，.zone-col直到它的新父元素不再溢出该区域。

因此，在我的示例中，小部件应该附加到.zone-col第二行的第一行，并且循环应该中断，因为它的新父级不应该溢出该区域。

不确定我是否完全理解 while 循环，因为我创建了一个无限循环......

这是我的代码笔

$(function() {

  var zone = $('.zone');
  var el = $('.active');

  var zW = zone.outerWidth();
  var zR = zone.offset().left + zW;

  var eW = el.outerWidth();
  var eR = el.offset().left + eW;

  console.log(eR, zR);

  while (eR > zR) {
    var de = el.find('.widget').detach();
    el = el.nextAll('.zone-col:first');

    el.append(de);

    if (!eR > zR) {
      break;
    }
  }


});
.zone {
  width: 500px;
  height: 200px;
  border: 1px solid #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zone-col {
  position: absolute;
  min-width: 8.333333%;
  width: auto;
  border: 1px solid black;
  height: 100px;
}

.widget {
  width: 496px;
  height: 100%;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zone">
  <div class="zone-col" style="left: 0; top: 0;"></div>
  <div class="zone-col" style="left: 8.333333%; top: 0;"></div>
  <div class="zone-col active" style="left: 16.666667%; top: 0;">
    <div class="widget"></div>
  </div>
  <div class="zone-col" style="left: 25%; top: 0;"></div>
  <div class="zone-col" style="left: 33.333333%; top: 0;"></div>
  <div class="zone-col" style="left: 41.666667%; top: 0;"></div>
  <div class="zone-col" style="left: 50%; top: 0;"></div>
  <div class="zone-col" style="left: 58.333333%; top: 0;"></div>
  <div class="zone-col" style="left: 66.666667%; top: 0;"></div>
  <div class="zone-col" style="left: 75%; top: 0;"></div>
  <div class="zone-col" style="left: 83.333333%; top: 0;"></div>
  <div class="zone-col" style="left: 91.666667%; top: 0;"></div>

  <div class="zone-col" style="left: 0; top: 100px;"></div>
  <div class="zone-col" style="left: 8.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 16.666667%; top: 100px;"></div>
  <div class="zone-col" style="left: 25%; top: 100px;"></div>
  <div class="zone-col" style="left: 33.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 41.666667%; top: 100px;"></div>
  <div class="zone-col" style="left: 50%; top: 100px;"></div>
  <div class="zone-col" style="left: 58.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 66.666667%; top: 100px;"></div>
  <div class="zone-col" style="left: 75%; top: 100px;"></div>
  <div class="zone-col" style="left: 83.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 91.666667%; top: 100px;"></div>
</div>

标签： javascriptjqueryloopswhile-loop

解决方案

想通了，需要重置eW并且eR每次循环运行时，否则循环总是获得这些变量的第一个初始化值。

while (eR > zR) {
  var de = el.find('.widget').detach();
  el = el.nextAll('.zone-col:first');
  el.append(de);

  eW = el.outerWidth();
  eR = el.offset().left + eW;   

  if (!eR > zR) {
    break;
  }
}

推荐阅读