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

考虑代码：如何将元素的父元素固定值向下移动？

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

我想，只要有人点击 “点击” 父#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接受。

来源

2014-04-02 mehulmpt

告诉我们你在jsFiddle中试过的东西。 – blue

我可以在点击时用.unwrap（）打开父项。但是，如何在特定数量的跨度后包装相同的父级？ – mehulmpt

你用** parentNode **尝试过吗？ – blue

一个可行的方法：

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>，这段代码会将最后一个留在子块中。如果不需要，只需将if区块中的条件更改为if ($spansToMove.length === 0)（或者只是if (!($spansToMove.length))）。

来源

2014-04-02 12:15:54 raina77ow

另一种方法

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

来源

2014-04-02 12:22:59

似乎只适用于第一个跨度。 – j08691

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

它很简单的逻辑问题是你怎么想实现它？

这里是让你理解其中的逻辑最简单的方法：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"));    
    } 
    });  
});

来源

2014-04-02 12:23:26 Champ

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

我希望这可以帮助您

来源

2014-04-02 12:25:16 Vignesh

您不必明确删除节点，只需将它们追加到新的父级。无论如何，它不会产生OP想要的输出。 –

这是一个纯粹的和非常简单的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); 
    } 
    } 
};

在e点击我们只需要把sub_block的前两个孩子放在它前面。

来源

2014-04-03 03:46:05

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

回答

相关问题