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

【问题标题】：How Do I Shift The Parent Of Element Fixed Value Down?如何将元素固定值的父级向下移动？
【发布时间】：2014-04-02 12:10:05
【问题描述】：

考虑代码：

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

【问题讨论】：

向我们展示您在 jsFiddle 中的尝试。
我可以在点击时使用 .unwrap() 解开父级。但是如何在特定数量的跨度后包装同一个父级？
你用 parentNode 试过了吗？
你可能想看看this。
^ 不。实际上我不想交换 div。我想在每次点击时降低父 div 或从父 div 中取出 2 个子跨度。

标签： javascript jquery html css

【解决方案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。这真的很简单：每次点击我们都会抓取 $subBlock 的前两个<span>-children；如果至少有 2 个，我们将它（使用insertBefore()）从该块内部移动到外部。如果少于 2 个，我们就关闭这个处理程序。

显然，如果<span> 为奇数，则此代码会将最后一个留在子块中。如果不需要，只需将if 块中的条件更改为if ($spansToMove.length === 0)（或只是if (!($spansToMove.length))）。

【讨论】：

【解决方案2】：

它的逻辑很简单问题是你想如何实现它？

这是让你理解逻辑的最简单方法：DEMO

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

【讨论】：

【解决方案3】：

这里是一个纯粹的非常简单的DOM解决方案，使用insertBefore：

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

在每次点击时，我们只需将sub_block 的前两个孩子插入到它之前。

【讨论】：

【解决方案4】：

另一种方法

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

在每次点击中，它将获得subblock 的前2个孩子并将其移动到父块。

Fiddle

编辑

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

Updated fiddle

【讨论】：

@j08691 哦，你是对的。我已经编辑了答案和小提琴。第一个代码的问题是，在附加第一个跨度之后，第二个跨度将是 subdiv 的第一个孩子。如果我尝试带第二个孩子，这会导致第三个跨度被追加..

【解决方案5】：

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

希望对你有帮助

【讨论】：

您不必显式删除节点，只需将它们附加到新父节点即可。无论如何，它不会产生 OP 想要的输出。