如何将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); }); }); 

请帮助:)上kocka h1

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

首先点击来产生随机号，然后点击按钮。 movethat div会根据生成的随机数量移动到另一个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更改为类，然后尝试下面的代码。在每次点击时，生成随机数并基于该数字，movethat被移动到该div中。你需要检查萤火虫的输出。

$(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别拉诺夫，首先你不能是有帮助的使用相同的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>