回答
在我看來,採取兩種ul
具有相同的類名和不同ID's
。使它們彼此相鄰排列。同時動態添加li
,請使用counter
變量對添加進行計數。如果添加超過4,則只需添加到另一個ul
標籤(更改您正在使用的ID)。
你可以這樣做。
var liLength;
$("#btnAddLi").click(function() {
liLength=$('#yourLastUl li').length;
if(liLength>4)
$("#CreateOneMoreUL").append("<li>Content</li>");
else
$("#yourLastUL").append("<li>Content</li>");
});
這裏是你的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>');
你可以使用CSS列。它似乎正是你正在尋找的:http://jsfiddle.net/ewsMh/。
ul {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
我認爲有unsupported browsers polyfills。
油滑的解決方案,但只有最新的瀏覽器和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和更早版本。
- 1. 如何從LI元素的文本添加類UL元素
- 2. 添加兩個li元素到UL
- 3. 對準UL li元素
- 4. 選擇li元素數ul元素
- 5. 如何獲得li元素,並添加作爲選擇選項
- 6. 如何添加UL/LI到json2html解析
- 7. 使用jQuery添加一些li元素到ul
- 8. jquery set ul和li元素添加了不希望的樣式
- 9. 如果LI元素是父元素且具有UL(子元素或子菜單),如何添加此跨度
- 10. 如何查找li元素路徑中的ul個元素?
- 11. 不能爲li元素添加class nav_menu
- 12. 如何製作兩個ul li元素內聯?
- 13. 如何在Jquery排序的UL末尾添加拖動LI元素?
- 14. 動態地將列表元素添加到ul元素
- 15. CSS - 如何繼續在UL LI的第二列UL LI
- 16. 如何從li元素列表中添加和刪除類?
- 17. li元素不擴展到ul元素的高度當一個li元素推高ul的高度
- 18. CKEditor:自定義樣式UL/LI元素
- 19. UL li元素都在IE比Firefox
- 20. 在javascript中創建ul和li元素。
- 21. CSS - 在ul上展開li元素
- 22. 轉換對象UL li元素
- 23. ul-li元素樣式不正確
- 24. Bootstrap破壞ul和li元素
- 25. 從ul中刪除li元素
- 26. jQuery拖放ul和li元素
- 27. 如何使用jquery爲每個圖像添加ul和li?
- 28. 如何動態加載Li元素與其他Javascript陣列li
- 29. 如何使用PHP爲li元素添加id
- 30. 如何使用mootools爲li元素添加類?
感謝答覆,我會嘗試,並將其標記爲答案,如果它可以幫助 – ALAN 2013-02-22 08:51:36