如何在ul中添加li元素作为2列

Question

我必须动态添加li元素作为列，如此图片

我有一个li元素，我想像这张图片一样追加li元素，一个coluumn必须有4 li，如果元素是5.它必须添加到另一行，可能吗？

Answer 1

您可以使用CSS列。它似乎正是您所寻找的：http://jsfiddle.net/ewsMh/。

ul {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

我认为unsupported browsers有填充物。

Answer 2

这是你的DOM：

<ul id="left"></ul>
<ul id="right"></ul>

添加li的功能（使用jquery）：

var addLi = function($li) {
    var $uls = $('ul');
    $.each($uls, function(index, ul) {
        // If this ul has less than 5 li's
        // then add the li here
        if ($(this).find('li').length < 5) {
            $(this).append($li);
            // exit the for loop since we have placed this li
            return;  
        }
    }
};
addLi('<li>Test</li>');

Answer 3

在我看来，请使用两个ul具有相同的班级名称和不同的ID's。使它们彼此相邻排列。在动态添加li的同时，使用counter变量计算添加内容。如果添加超过4，则只需添加到另一个ul标记（更改您正在运行的ID）。

Answer 4

你可以这样做。

var liLength;
$("#btnAddLi").click(function() {
liLength=$('#yourLastUl li').length;
if(liLength>4)
    $("#CreateOneMoreUL").append("<li>Content</li>");
else
    $("#yourLastUL").append("<li>Content</li>");
});

Answer 5

您只能使用一个ul与nth-child(odd)，nth-child(even)选择器来定位一半元素，并float相应地左右对齐。

看一下这个演示：http://jsfiddle.net/x9kxd/

当然你错过了<li>元素的顺序，但至少你得到了一个很好的简单的双列容器解决方案。

<强> --- --- EDIT

如果您的<li>元素需要在4个项目之后更改列，那么您应该使用nth-child(-n+4)选择器。这样您就可以按照自己的意愿保留订单。

以下是演示：http://jsfiddle.net/QqudC/1/

除IE8及更早版本外，所有主流浏览器都支持:nth-child()选择器。