Question

我有一堆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感到困惑:(

谢谢

Answer 1

<强> 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中选择所有卡元素，然后在0和cards.length之间生成两个random。使用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/

页面加载的随机Div顺序

1 个答案: