jquery - 如何将 ul 中的 li 元素添加为 2 列

Question

我必须动态添加 li 元素作为列，就像这张图片

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

Answer 1

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

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

我认为有针对不受支持的浏览器的 polyfill 。

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

您只能使用一个ulwith nth-child(odd),nth-child(even)选择器来定位一半的元素，float并相应地左右它们。

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

当然，您会错过<li>元素的顺序，但至少您会为两列容器获得一个不错且简单的解决方案。

- -编辑 - -

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

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

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