Javascript 如何将所需数量的元素绑定到一个div中？_Javascript_Jquery_Html

Javascript 如何将所需数量的元素绑定到一个div中？

javascript jquery html

Javascript 如何将所需数量的元素绑定到一个div中？,javascript,jquery,html,Javascript,Jquery,Html,我对Jquery这个东西还不熟悉我已经创建了许多div元素例如：那么，有没有办法使用JQuery实现它呢？？？使用 ... ... ... 是的，这是可能的，您可以使用。克隆和.appendTo $( ".inner" ).clone().appendTo( "#outer" ); 您可以简单地执行以下操作： $（“div#outer”）。追加（“INNER”）工作如果需要创建多个内部div，可以使用for循环： $(document).ready(function(){

我对Jquery这个东西还不熟悉

我已经创建了许多

div

元素

例如：

那么，有没有办法使用JQuery实现它呢？？？

使用


...
...
...

是的，这是可能的，您可以使用。克隆和.appendTo

$( ".inner" ).clone().appendTo( "#outer" );

您可以简单地执行以下操作：

$（“div#outer”）。追加（“INNER”）

工作

如果需要创建多个内部div，可以使用for循环：

$(document).ready(function(){
    for (var i = 0; i < 3; i++) {
        $("div#outer").append("<div class='innerclass'>INNERCLASS</div>");
    }
});

$（文档）.ready（函数（）{
对于（变量i=0；i<3；i++）{
$（“div#outer”）.append（“INNERCLASS”）；
}
});

正在工作。


jQuery UI可排序-默认功能
.外部{
显示：块；
背景#3a3a；
宽度：100%；
高度：自动；
填充：15px；
颜色：#fff；
溢出：隐藏；
}
.内部{
显示：块；
宽度：100%；
背景：#3a3；
填充：3倍；
颜色：#fff；
溢出：隐藏；
边缘底部：5px；
}
$（函数（）{
$（“.inner”）。每个（函数（索引）{
如果（索引%3==0 | |索引==0）{
$（“#正文”）。追加（“”）
}
var lastOuter=$（“.outer:last”）；
append（$（this.clone（））；
$（this.remove（）；
})
});
内部的
内部的
内部的
内部的
内部的
内部的
内部的
内部的
内部的

如图所示：

从

id

更改为

class

不要给超过一个标签提供相同的id，因为@pc shooter说不要重复id，请在询问之前自己尝试！我不需要克隆相同的元素，但我在不同的

div

部分中有不同的元素，所以我只需要将它绑定到另一个div中，我需要将内部绑定到外部。。但是，如果答案对你有帮助，你能接受或投票吗？非常感谢，这修正了我需要的

if（索引%3==0 | | index==0）

而不是

if（索引+1%3==0 | | index==0）

您不需要最后一个

索引==0

，同样在

javascript

中，您应该使用

====

而不是

来比较相同类型的变量。

<div id="outer">
  <div class="inner">...</div>
  <div class="inner">...</div>
  <div class="inner">...</div>
</div>

$( ".inner" ).clone().appendTo( "#outer" );

$(document).ready(function(){
    for (var i = 0; i < 3; i++) {
        $("div#outer").append("<div class='innerclass'>INNERCLASS</div>");
    }
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
.outer{
    display:block;
    background:#3a3a3a;
    width:100%;
    height:auto;
    padding:15px;
    color:#fff;
    overflow:hidden;
}

.inner{
    display:block;
    width:100%;
    background:#3a3;
    padding:3px;
    color:#fff;
    overflow:hidden;
    margin-bottom:5px;
}
  </style>
  <script>
  $(function() {

$(".inner").each(function(index){
   if(index%3 == 0 || index == 0){
      $("#body").append("<div class='outer'></div>")
   }
   var lastOuter = $(".outer:last");
   lastOuter.append($(this).clone());
   $(this).remove();
})


});
  </script>
</head>
<body>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div id="body"></div>
</body>
</html>

var innerDivHtml = '<div class="inner"></div>';
$('div.outer').each(function(index, element){
    var i = 3;
    while(i--)
        $(element).append(innerDivHtml);
});

$(".inner").each(function(index){
    var me = $(this);
   if(index % 3 === 0)
      $('body').append('<div class="outer"></div>');
   $(".outer:last").append(me.clone());
   me.remove();
})