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

首先将所有ids 更改为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 中选择所有卡片元素，然后在 0 和 card.length 之间生成两个随机数。用于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 回答