10

ID「gallerycard」のdivがたくさんあります。ユーザーがページにアクセスするたびにランダムな順序でロードする必要があります。

<div id="gallerycard">
     <div id="name">Akulina</div>
    <div id="info">N/A</div>
</div>

<div id="gallerycard">
     <div id="name">Martina</div>
    <div id="info">N/A</div>
</div>

<div id="gallerycard">
     <div id="name">Joseph</div>
    <div id="info">N/A</div>
</div>

<div id="gallerycard">
     <div id="name">Karen</div>
    <div id="info">N/A</div>
</div>
...

と...

ここに CSS のフィドルがあります: http://jsfiddle.net/BwJHj/

ほとんどの人にとってこれは簡単な作業であることはわかっていますが、私は時々jqueryに苦労しています:(

ありがとうございました

4

1 に答える 1

23

HTML

ページ上で一意である必要があるidためclasses、最初にすべての を に変更します。id

<div class="gallerycard">
     <div class="name">Akulina</div>
    <div class="info">N/A</div>
</div>

<div class="gallerycard">
     <div class="name">Martina</div>
    <div class="info">N/A</div>
</div>

<div class="gallerycard">
     <div class="name">Joseph</div>
    <div class="info">N/A</div>
</div>
...

CSS (マークアップはクラスを使用するようになったため、反映するスタイルを切り替えます)

.gallerycard {
    margin: 8px;
    float: left;
    height: 150px;
    width: 221px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;
}

Javascript

DOM からすべての card 要素を選択し、0 から cards.length までの 2 つの乱数を生成します。eq選択した要素からランダムな要素を選択し、選択した要素のセット内でランダムに選択した別の要素の前に配置するために使用します。

var cards = $(".gallerycard");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}

JS フィドル: http://jsfiddle.net/BwJHj/1/

于 2013-08-28T08:53:43.153 に答える