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

首先点击kocka h1以生成随机数，然后点击按钮。 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 2

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

$(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 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何将div移动到下几个div？

4 个答案: