我有一堆 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 的 fiddle : http://jsfiddle.net/BwJHj/
我知道这对你们大多数人来说是一项简单的任务，但有时我真的很难使用 jquery :(
谢谢
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(因为标记现在使用类切换样式来反射(reflect))
.gallerycard {
margin: 8px;
float: left;
height: 150px;
width: 221px;
background-color: rgba(0, 0, 0, .3);
border-radius: 8px;
}
Javascript
从 DOM 中选择所有卡片元素，然后生成两个介于 0 和 cards.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 fiddle : http://jsfiddle.net/BwJHj/1/