Question

考虑代码：

＆＃13;

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

＆＃13;

我希望每当有人点击＆＃34; .click＆＃34;时，父母#sub_block会向下移动2个跨度。

点击1：

＆＃13;

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

＆＃13;

点击2：

＆＃13;

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

＆＃13;

等等。当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()）从此块内部移动到外部。如果小于2，我们只需关闭此处理程序。

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

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

Answer 3

另一种方法

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

Answer 4

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

我希望这可以帮到你

Answer 5

这是一个纯粹且非常简单的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的前两个孩子并将其插入其中。

如何将元素固定值的父级移位？

5 个答案: