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），您通常会采用以下appproach：

// 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通常会更好。

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和append方法。因此，每当点击一个按钮（id="appendTo"）时，新的div将附加到<div class="row">，即：

＆＃13;

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

＆＃13;

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

＆＃13;

如何生成动态列

3 个答案: