考虑一下代码:
<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”时,父#子#块向下移动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>
等等。当它不再工作或停止时。有什么建议吗?jQuery已接受。
最佳答案
一种可能的方法:
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>
)从这个block的内部移动到外部。如果少于2,我们就关掉这个处理器。显然,如果存在奇数
insertBefore()
,则此代码将在子块中保留最后一个。如果不需要,只需将<span>
块中的条件更改为if
(或仅更改if ($spansToMove.length === 0)
)。