如何將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>