Javascript 如何向下移动元素固定值的父元素？

以代码为例：

点击我一种可能的方法：

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

var$subBlock=$（“#sub_block”），
$clicker=$（'.click'）；
var moveProcessor=函数（）{
var$spansToMove=$subBlock.children（'span'）.slice（0,2）；
如果（$spansToMove.length<2）{
$clicker.off（'click'，moveProcessor）；
}
否则{
$spansToMove.insertBefore（$subBlock）；
}
}
$clicker.on（'click'，moveProcessor）；

。这真的很简单：每次单击，我们都会抓取$subBlock的前两个子项
；如果至少有2个，我们将它（使用
insertBefore（）
）从该块内部移动到外部。如果少于2，我们就关闭这个处理器

显然，如果有奇数个
，则此代码将在子块中保留最后一个。如果不需要，只需将
If
块中的条件更改为
If（$spansToMove.length==0）
（或者只需
If（！（$spansToMove.length））
。
另一种方法

$(".click").click(function () {
  $("#sub_block").before($("#sub_block span:eq(0)"));
  $("#sub_block").before($("#sub_block span:eq(1)"));
});

在每次单击中，它将获得
子块的前两个子块
，并将其移动到父块


编辑

$(".click").click(function () {
  $("#sub_block").before($("#sub_block span:eq(0)"));
  $("#sub_block").before($("#sub_block span:eq(0)"));
});

它的逻辑非常简单问题是您想如何实现它

下面是让您理解逻辑的最简单方法：

$(function(){     
  $(".click").on('click',function(){
    var arrSpan = $("#sub_block span");
    if(arrSpan.length) {
      arrSpan.eq(0).insertBefore($("#sub_block"));            
    }
    arrSpan = $("#sub_block span");
    if(arrSpan.length) {
      arrSpan.eq(0).insertBefore($("#sub_block"));            
    }
  });      
});

我希望这能帮助您
这是一个纯粹且非常简单的DOM解决方案，使用：

var block=document.getElementByID（'block'）；
var sub_block=document.getElementByID（'sub_block'）；
document.querySelector（'.click'）。onclick=function（）{
对于（变量i=0；i<2；i++）{
if（子块子项[0]）{
块插入之前（子块子[0]，子块）；
}
}
};

每次单击时，我们只需取
子块的前两个子块
并将它们插入子块之前。
向我们展示您在JSFIDLE中的尝试。我可以在单击时使用.unwrap（）打开父块。但是，在指定的跨距数之后，如何包装同一个父节点？是否尝试使用parentNode？您可能希望看到。^No。实际上，我不想交换div。我想让父div稍微向下一点，或者在每次单击时从父div中取出两个子跨度。@j08691哦，你说得对。我已经编辑了答案和小提琴。第一个代码的问题是，在附加第一个span之后，第二个span将是subdiv的第一个子级。如果我尝试获取第二个子节点，这将导致第三个跨度被追加。您不必显式删除节点，只需将它们追加到新的父节点。无论如何，它不会产生OP想要的输出。
function shift() {
  var div_elem = document.getElementById('sub_block');
  var master = document.getElementById('block');
  if(div_elem.childNodes.length>0) {
    var elem1 = div_elem.childNodes[0];
    var elem2 = div_elem.childNodes[1];
    elem1.parentNode.parentNode.removeChild(elem1);
    elem2.parentNode.parentNode.removeChild(elem2);
    master.appendChild(elem1);
    master.appendChild(elem2);
  }
}

var block = document.getElementByID('block');
var sub_block = document.getElementByID('sub_block');

document.querySelector('.click').onclick = function() {  
  for (var i = 0; i < 2; i++) {
    if (sub_block.children[0]) {
      block.inserBefore(sub_block.children[0], sub_block);
    }
  }
};