如何生成动态列答案

【问题标题】：How to generate a dynamic column如何生成动态列
【发布时间】：2015-05-04 22:51:51
【问题描述】：

好的，说我有这个：

<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 应用程序中。

编辑

进一步说明。

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

【问题讨论】：

追加第三列的触发器是什么？点击按钮？
@PedroLobito，可能......这有关系吗？老实说，我还不确定。
我在下面发布了一个工作示例。

标签： javascript jquery ruby-on-rails backbone.js twitter-bootstrap-3

【解决方案1】：

嗯，看起来您正在使用预先确定的网格系统。那些通常是十二个。这意味着您在任何时候都只能拥有 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>");

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

【讨论】：

我是。推特引导是具体的。这会相应地调整布局吗？即，我不必担心新列如何使整体显示变得颠倒？
我必须看到更多的脚本才能确定，但这所做的是清空类“行”的任何内容并用附加的元素替换它。如果您希望它更具体地针对该行，我会为 class="row" 的 div 提供一个 id，以便您可以更轻松地引用它。

【解决方案2】：

您可以使用 jQuery click 和 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>

【讨论】：

【解决方案3】：

要创建一个元素并将其插入到文档对象模型 (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 和 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 通常会更好。

【讨论】：