如何生成动态列

Question

好的，假设我有这个：

<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

到目前为止是两列。

现在，假设布局应该动态更改为三列，可能像这样：

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

如何动态插入第三列？

我的javascript不存在，我的jquery勉强过关。但是，如果此处需要 javascript 解决方案 ，请告诉我。

背景信息：这是在使用 Backbone.js.

的 ROR 应用程序中

编辑

进一步说明。

那么，假设列不相等，当您动态添加另一列时，如何调整其他列以反映添加的列？

Answer 1

要创建元素并将其插入文档对象模型 (DOM)，您通常会采用以下方法：

// create your element
var newDiv = document.createElement("div");

// set element properties
newDiv.className = "col-xs-6 col-md-4";
newDiv.innerHTML = ".col-xs-6 .col-md-4";

//select your parent element
var parentDiv = document.querySelector(".row");

//append your new element to the parent element
parentDiv.appendChild(newDiv);

对于您的情况，我怀疑选择父元素将是最棘手的部分。查看 CSS 选择器引用 here and here。使用 CSS 选择器作为 document.querySelector() 的参数来获取父元素。

您还可以使用 element.insertAdjacentHTML() 将 HTML 作为字符串插入，如下所示：

//select your parent element
var parentDiv = document.querySelector(".row");

//insert adjacent HTML as a string
parentDiv.insertAdjacentHTML("beforeend",
    "<div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>");

终于可以直接操作元素的HTML了：

var parentDiv = document.querySelector(".row");
parentDiv.innerHTML += "<div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>";

虽然最后一个选项看起来编写起来最快，但它是性能最密集的。 insertAdjacentHTML 非常高效，但您并不总是希望将 HTML 元素作为字符串处理，因此通常使用 document.createElement 和 element.appendChild.[=19= 会更好]

Answer 2

嗯，看来您使用的是预先确定的网格系统。那些通常是十二横。这意味着您在任何时候都只能有 12 个网格。所以不是像这样的两列：

   <div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
    </div>

因为12的一半是6个。这意味着要有三列，它看起来像这样：

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
</div>

因为12除以3都是4。要从 2 列创建 3 列，您可以使用 javaScript 或 jQuery。 jQuery 看起来像这样：

$(".row").empty().append("<div class='col-xs-4'>.col-xs-4</div>
  <div class='col-xs-4'>.col-xs-4</div>
<div class='col-xs-4'>.col-xs-4</div>");

请记住，有多种方法可以执行此操作。我认为这可能是最容易理解的！

Answer 3

您可以使用 jQuery click and append 方法。因此，每当单击按钮 (id="appendTo") 时，新的 div 将附加到 <div class="row">，即：

var divNum = 3; 
$("#appendTo").click(function(){  
   divNum ++;
   $(".row").append('<div id="myId'+divNum+'" class="col-xs-6 col-md-4">New Div '+divNum+'</div>');                
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<button id="appendTo"> Click to Append</button>

如何生成动态列

How to generate a dynamic column

javascript

jquery

ruby-on-rails

backbone.js

twitter-bootstrap-3