4

ページにアイテムのリストを表示する必要があり、このページは AJAX で更新されます。新しいアイテムがクライアントにプッシュされるたびに、ul list.

私が話している種類のリストの例を次に示します: http://jsfiddle.net/XEK4x/

HTML

<ul class="itemlist">
    <li>Item #2</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

CSS

.itemlist li{
    width:100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    float: left;
    background: #dddddd;
}

jqueryを使用してリストのランダムな場所に新しいアイテムを追加する方法はありますか? 次のようなことができることはわかっています$(li_element).appendTo(".itemlist");が、これによりリストの最後に追加されます。

問題になる可能性があるもう 1 つのことは、それぞれli elementが左に浮いているという事実です。そのため、新しい要素が途中に追加されると、その要素以降のすべての要素が 1 つ右に押し出されます。

several ul lists floated left、およびを使用できるli's stacked under each otherので、新しいアイテムがレンダリングされると、リストは単純に押し下げられますが、これをランダムに行うと、一部の ul リストが他のリストよりも長くなり、奇妙に見えます。

4

3 に答える 3

6 
var $lis = $(".itemlist li");
$lis.eq(Math.floor(Math.random()*$lis.length)).after(
                                            /* your new content here */ );

.after ()<li>メソッドは兄弟を追加するため、アイテムのリストからランダムな要素を選択して使用.after()します。または.before()。

PS 新しく追加されたアイテムが他のアイテムを右に押し出すことに関して、なぜそれが問題なのですか? リストのレイアウトが横長の場合、それは普通のことではありませんか?

于 2011-11-03T22:30:38.027 に答える
1

受け入れられた回答では、新しい要素が最初に挿入されることはありません。挿入できる位置は、要素数に 1 を加えた位置です。要素間 + 開始 + 終了。

コードはあまり良くありませんが、修正します。

http://jsfiddle.net/XEK4x/38/

var $lis = $(".itemlist li");
var pos = Math.floor(Math.random() * ($lis.length + 1)) - 1;
if(pos != -1){
  $lis.eq(pos).after("<li>new</li>");
} else{
  $lis.eq(0).before("<li>new first</li>");
}
于 2013-09-05T10:26:14.417 に答える
1

次のようなことを試してください：

var randomNum = Math.floor(Math.random()*9);
$(".itemlist li").eq(randomNum).append("HI");

JavaScriptで乱数を作成するだけです。次に、リストでそのランダムな要素を選択し、新しいコンテンツを追加します。私が質問を理解していない限り。

于 2011-11-03T22:27:39.190 に答える