如何生成动态列

Ok, say I have this:

好吧,说我有这个:

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

That's two columns so far.

到目前为止,这是两列。

Now, say the layout is supposed to change dynamically to three columns, like this maybe:

现在,假设布局应该动态更改为三列,这可能是:

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

How do I insert the third column dynamically?

如何动态插入第三列?

My javascript is non-exist, my jquery barely passing. But nonetheless, if the javascript solution is required here, let me know.

我的javascript是不存在的,我的jquery几乎没有通过。但是,如果这里需要javascript解决方案,请告诉我。

Background info: This is in a ROR application that's using Backbone.js.

背景信息:这是在使用Backbone.js的ROR应用程序中。

EDIT

For further clarification.

进一步澄清。

So, say that the columns are unequal, and when you add another column dynamically, how do you adjust the other columns to reflect the additional column?

因此,假设列不相等,并且当您动态添加其他列时,如何调整其他列以反映其他列?

3 个解决方案

#1

Well, it looks like you're using a predetermined grid system. Those are usually twelve across. What that means is that you can only have 12 grids at any time. So instead of the two columns that look like this:

好吧,看起来你正在使用预定的网格系统。那些通常是十二对。这意味着你任何时候都只能拥有12个网格。所以不是看起来像这样的两列:

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

Because half of 12 is 6 each. That means that to have three columns it would look like this:

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

Because 12 divided by 3 is 4 each. To create the 3 columns from the 2 columns you could use javaScript or jQuery. jQuery looks like this:

因为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>");

Keep in mind there are several ways to perform this action. I think this is probably the easiest to comprehend!

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

#2

You can use the jQuery click and append methods . So, whenever a button (id="appendTo") is clicked, a new div will be appended to <div class="row">, i.e.:

您可以使用jQuery单击和追加方法。因此,每当单击一个按钮(id =“appendTo”)时,新的div将附加到

,即:

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

To create an element and insert it into the document object model (DOM) you would traditionally take the following appproach:

要创建元素并将其插入到文档对象模型(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);

In your case, I suspect selecting the parent element will be the trickiest part. Check out the CSS selectors references here and here. Use a CSS selector as a parameter to document.querySelector() to grab the parent element.

在你的情况下,我怀疑选择父元素将是最棘手的部分。在这里和这里查看CSS选择器引用。使用CSS选择器作为document.querySelector()的参数来获取父元素。

You can also use element.insertAdjacentHTML() to insert HTML as a string like so:

您还可以使用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>");

Finally, you can manipulate the element's HTML directly:

最后,您可以直接操作元素的HTML:

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

While that last option may seem like the quickest to write, it's the most performance intensive. insertAdjacentHTML is extremely efficient, but you don't always want to deal with HTML elements as strings, so it's often better to use document.createElement and element.appendChild.

虽然最后一个选项可能看起来最快,但它是性能最强的。 insertAdjacentHTML非常有效,但您并不总是希望将HTML元素作为字符串处理,因此使用document.createElement和element.appendChild通常更好。

#1