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

【问题标题】：Detach and append element until there is no overflow - jQuery分离和附加元素，直到没有溢出 - jQuery
【发布时间】：2019-10-22 19:16:44
【问题描述】：

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

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

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

这是我的codepen

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

【问题讨论】：

标签： javascript jquery loops while-loop

【解决方案1】：

您需要更新循环内的比较值。现在 eR 总是大于 zR，导致无限循环。

【讨论】：

【解决方案2】：

想通了，每次循环运行时都需要重置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;
  }
}

【讨论】：