如何UL添加li元素作爲2列

我要動態地添加li元素爲列，喜歡這幅畫如何UL添加li元素作爲2列

我有一個li元素，我想追加li元素喜歡這幅畫，一個coluumn有有4 li，如果元素是5.它必須添加到另一行，可能嗎？

enter image description here

來源

2013-02-22 ALAN

在我看來，採取兩種ul具有相同的類名和不同ID's。使它們彼此相鄰排列。同時動態添加li，請使用counter變量對添加進行計數。如果添加超過4，則只需添加到另一個ul標籤（更改您正在使用的ID）。

來源

2013-02-22 08:44:23

你可以這樣做。

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

來源

2013-02-22 08:47:25

這裏是你的DOM：

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

，增加了李時珍（使用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>');

來源

2013-02-22 08:47:41 andyzinsser

感謝答覆，我會嘗試，並將其標記爲答案，如果它可以幫助 – ALAN 2013-02-22 08:51:36

你可以使用CSS列。它似乎正是你正在尋找的：http://jsfiddle.net/ewsMh/。

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

我認爲有unsupported browsers polyfills。

來源

2013-02-22 08:49:08

油滑的解決方案，但只有最新的瀏覽器和IE瀏覽器沒有:( – andyzinsser 2013-02-22 08:51:41

感謝答覆，我會嘗試，並標記爲答案，如果它幫助 – ALAN 2013-02-22 08:56:30

+1，因爲我認爲這是解決方案，但是我剛剛刪除了2個'li's，並且每個列成爲[3] [3]個元素，而OP期望[4] [2]。 – Bazzz 2013-02-22 08:56:39

只能使用一個ul與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和更早版本。

來源

2013-02-22 10:02:32 otinanai

如何UL添加li元素作爲2列

回答

相關問題