jquery - それぞれ1、2、または3要素のランダムなグループのコンテナdivに画像を配置します

Question

私は一連の画像を持っています

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
<img src="6.jpg" />

などなど。

そして、私が行う必要があるのは、div内のランダムな1、2、または3つの要素でラップすることです。結果は次のようになります

<div>
 <img src="1.jpg" >
</div>
<div>
 <img src="2.jpg" ><img src="3.jpg"><img src="4.jpg">
</div>
<div>
 <img src="5.jpg" ><img src="6.jpg" >
</div>

これを行う方法はありますか？

ありがとうございました！

------編集-------同じことを行う方法ですが、今回は画像が？Bojanのimgを単に置き換えるだけではうまくいかないようです。

Answer 1

これはその非常に簡単な例です

これがhtmlです

<div id="container">
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>

そしてここにjavascriptがあります

function wrapInsideDiv(){
    while($("#container>img").length > 0){
        var images = Math.floor(Math.random() * 4) + 1;
        var div = $("<div/>");
        $("#container").append(div);
        $("#container>img").each(function(index, elem){
            if(index + 1 < images){
             $(elem).appendTo(div);
            }
        });
    }
}
wrapInsideDiv();​

デモ

Answer 2

私はこのようにします（ここにデモがあります。結果を確認するには、ページのソースを確認する必要があります）：

HTML

<img src="img.png" />
<img src="img.png" />
<img src="img.png" />
<img src="img.png" />
<!-- etc. ->

<div id="container"></div>

JS

var randomNr, currentDiv;

$("img").each(function(){
    // if this is the first iteration, or if randomNr is larger than 3
    if(randomNr == undefined || randomNr > 3){
        // get a new random nr between 1 and 3
        randomNr = randomXToY(1, 3);
        // create a new div to put the images in
        currentDiv = $("<div></div>");
        $("#container").append(currentDiv);
    }

    // move image to currentDiv
    $(this).appendTo(currentDiv);
    randomNr++;   
});


// function to get random number
function randomXToY(minVal,maxVal){
    var randVal = minVal+(Math.random()*(maxVal-minVal));
    return Math.round(randVal);
}  

これにより、1〜3の乱数が生成され、すべての画像がループされ、その数から最大3つまでカウントされます。乱数が3より大きくなるたびに、画像を配置するための新しいdivが作成されます。

Answer 3

各画像にIDを指定し、javascriptまたはjqueryを使用して、乱数または一連の乱数を生成し、この変数を使用してそれらを取得し、必要な特定のdivにプッシュします。