javascript - 如何将所需的元素绑定(bind)到一个div中?

标签 javascript jquery html

我对这个 Jquery 东西很陌生..

我创建了许多 div 元素..

例如:

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

所以我需要的是,是否可以要求任何 div 元素不能绑定(bind)或包含在另一个 div 元素中?例如,我需要一个 div#outer 元素中的 3 个 div#inner 元素,另一个元素中的其他 3 个元素..

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

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

有什么方法可以使用 JQuery 实现它吗?

最佳答案

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

关于javascript - 如何将所需的元素绑定(bind)到一个div中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23321339/

相关文章:

javascript - 无法将操作链接绑定(bind)到 html 按钮

html - header 问题 - CSS 变换(视差)

javascript - 过滤 Axios 响应

javascript - 单击按钮时获取 <li> 中 <a> 的文本

javascript - 替换使用 ajax 的页面上的内容

javascript - jQuery getJSON 无法看到 console.log

ios - html5在ios中发送消息

javascript - 谷歌地图 API V3 - Internet Explorer

javascript - URL 更改后更改按钮的状态

jquery - 调整大小时如何使位置绝对不与内容重叠?