0

この図のように、li 要素を列として動的に追加する必要があります

私には1つのli要素があり、この写真のようにli要素を追加したいのですが、要素が5の場合、1つの列には4つのliが必要です。別の行に追加する必要がありますか?

ここに画像の説明を入力

4

5 に答える 5

2

CSS 列を使用できます。それはまさにあなたが探しているもののようです: http://jsfiddle.net/ewsMh/。

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

サポートされていないブラウザ用のポリフィルがあると思います。

于 2013-02-22T08:49:08.177 に答える
1

ここにあなたの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>');
于 2013-02-22T08:47:41.313 に答える
0

要素の半分とそれに応じて左右の要素をターゲットにするためulにnth-child(odd)、セレクターを使用できるセレクターは1つだけです。nth-child(even)float

このデモを見てください：http：//jsfiddle.net/x9kxd/

もちろん、<li>要素の順序を見逃しますが、少なくとも2列のコンテナーの優れた単純なソリューションが得られます。

- -編集 - -

<li>要素が4項目後に列を変更する必要がある場合は、セレクターを使用する必要がありますnth-child(-n+4)。このようにして、必要に応じて順序を維持します。

デモは次のとおりです：http：//jsfiddle.net/QqudC/1/

セレクターは、:nth-child()IE8以前を除くすべての主要なブラウザーでサポートされています。

于 2013-02-22T10:02:32.627 に答える
0

私の意見では、ulクラス名が同じで、が異なる2つを取り上げID'sます。それらを互いに隣接して配置します。動的に追加するときliに、変数を使用して追加をカウントしcounterます。追加が4を超える場合は、別のulタグに追加するだけです（機能しているIDを変更します）。

于 2013-02-22T08:44:23.493 に答える
0

あなたはこのようにすることができます。

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-22T08:47:25.497 に答える