javascript - 如何将元素固定值的父级向下移动？

Question

考虑代码:

<div id="block">
  <div id="sub_block">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
  </div>
</div>
    
<div class="click">Click Me!</div>

我希望每当有人点击“.click”时，父级 #sub_block 就会向下移动 2 个跨度。

点击 1:

<div id="block">    
  <span></span>
  <span></span>

  <div id="sub_block">
    <span></span>
    <span></span>
    <span></span>

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span> 
  </div>
</div>

点击 2:

<div id="block"> 
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <div id="sub_block">   
    <span></span>    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>   
  </div>
</div>

等等。当 span<=0;它不应该再工作或停止。有什么建议么？ 接受 jQuery。

Answer 1

一种可能的方法:

var $subBlock = $('#sub_block'),
    $clicker  = $('.click');

var moveProcessor = function() {
  var $spansToMove = $subBlock.children('span').slice(0, 2);
  if ($spansToMove.length < 2) {
    $clicker.off('click', moveProcessor);
  }
  else {
    $spansToMove.insertBefore($subBlock);
  }
}

$clicker.on('click', moveProcessor);

Demo 。这真的很简单:每次点击我们都会获取前两个 <span> -我们的 $subBlock 的子节点；如果至少有 2 个，我们将其(使用 insertBefore() )从该 block 内部移动到外部。如果少于 2 个，我们就关闭这个处理程序。

显然，如果<span>是奇数个，此代码将保留 subBlock 中的最后一个。如果不需要，只需更改 if 中的条件即可阻止至if ($spansToMove.length === 0) (或者只是 if (!($spansToMove.length)) )。