如何将 div 移动到接下来的几个 div?

Question

我在某个div里面有一个div。

<div id="radnja">
<div id="movethat"></div>
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>

我想将div 'movethat' 移动到下一个div。 但我想这样做几次，具体取决于 H1 中的随机数是多少。

<div id="kocka">
<h1>0</h1>
</div>
<div id="baci">
<h2>Baci kocku</h2>
</div>

H1 是随机数。我用jquery来做这件事。

$(document).ready(function() {
$("#baci").click(function() {
var rand = Math.ceil(Math.random()*6);
$("#kocka h1").text(rand); }); });

请帮忙:)

Answer 1

你应该使用class而不是id，以下代码对你很有帮助

$(document).ready(function() {
$("#baci").click(function() {
var rand = Math.ceil(Math.random()*6);
for(var i = 0;i<rand;i++){
$('#movethat').appendTo($('#movethat').parent().next())
}
$("#kocka h1").text(rand); }); 
});

.radnja {
width:50px;
height:50px;
border:1px solid #f00;
float:left
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radnja">
<div id="movethat">222</div>
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div id="kocka">
<h1>0</h1>
</div>
<div id="baci">
<h2>Baci kocku</h2>
</div>

Answer 2

首先单击kocka h1生成随机数，然后单击按钮。movethatdiv 将根据生成的随机数数量移动到另一个div。

$(document).ready(function() {
$("#baci").click(function() {
var rand = Math.ceil(Math.random()*6);
$("#kocka h1").text(rand); }); });
$("#btnMoveDiv").on('click',function(){
var dv = $("#movethat").parent("div");
var randNo = $("#kocka h1").text();
if(randNo <8){
$("#radnja"+randNo).append(dv.html());
dv.empty();
$("#movethat").html("Movethat moved to div : "+ randNo);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="radnja">
<div id="movethat">movethat text</div>
</div>
<div id="radnja1">
</div>
<div id="radnja2">
</div>
<div id="radnja3">
</div>
<div id="radnja4">
</div>
<div id="radnja5">
</div>
<div id="radnja6">
</div>
<div id="radnja7">
</div>
<div id="radnja8">
</div>

<div id="kocka">
<h1>0</h1>
</div>
<div id="baci">
<h2>Baci kocku</h2>
</div>
<button id="btnMoveDiv">Move movethat div</button>

Answer 3

HTML 不能有重复的 ID。 将所有这些 ID 更改为类并尝试以下代码。每次点击时，都会生成随机数，并根据该数字在该div中移动movethat。您需要检查火虫中的输出。

$(document).ready(function() {
$("#baci").click(function() {
var rand = Math.ceil(Math.random() * 6);
$("#kocka h1").text(rand);
var cloneHtml = $("#movethat").clone();
$("#movethat").remove();
$(".radnja").eq(rand).html(cloneHtml);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radnja">
<div id="movethat">this is moving</div>
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div class="radnja">
</div>
<div id="kocka">
<h1>0</h1>
</div>
<div id="baci">
<h2>Baci kocku</h2>
</div>

Answer 4

@Jovan Belanov首先，您不能多次使用相同的id。您可以使用类名代替 id，用于相同的目的。 其次，不知道你在问什么问题。 请找到以下代码。我希望你也有同样的期待。

.radnja,#kocka,#baci{
float:left;
}
h1,h2{
margin:0;
padding:0;
}
.clearfix{
clear:both;
}

<div class="clearfix">
<div class="radnja">
<div id="movethat">hi</div>
</div>
<div class="radnja">
hi
</div>
<div class="radnja">
hi
</div>
<div class="radnja">
hi
</div>
<div class="radnja">
hi
</div>
<div class="radnja">
hi
</div>
<div class="radnja">
hi
</div>
<div id="kocka">
<h1>0</h1>
</div>
<div id="baci">
<h2>Baci kocku</h2>
</div>

</div>