Thứ tự Div ngẫu nhiên khi tải trang

Question

Tôi có một loạt các div với ID "thư viện". Tôi cần chúng tải theo thứ tự ngẫu nhiên mỗi khi người dùng truy cập trang.

<div id="gallerycard"> 
    <div id="girlname">Akulina</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Martina</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Samantha</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Karen</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Jodie</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Sophie</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Olivia</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Leigh</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div id="gallerycard"> 
    <div id="girlname">Kimberly</div> 
    <div id="girlinfo">N/A</div> 
</div> 

Và ...

Đây là fiddle với CSS:http://jsfiddle.net/BwJHj/

Tôi biết đây là một nhiệm vụ đơn giản cho hầu hết các bạn nhưng tôi thực sự phải vật lộn với jquery vào những thời điểm :(

Cảm ơn bạn

Answer 1

HTML

sự thay đổi đầu tiên tất cả các id s để classes từ id phải là duy nhất trên một trang.

<div class="gallerycard"> 
    <div id="girlname">Akulina</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Martina</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Samantha</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Karen</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Jodie</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Sophie</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Olivia</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Leigh</div> 
    <div id="girlinfo">N/A</div> 
</div> 

<div class="gallerycard"> 
    <div id="girlname">Kimberly</div> 
    <div id="girlinfo">N/A</div> 
</div> 

CSS (Kể từ khi đánh dấu bây giờ sử dụng các lớp học chuyển đổi phong cách để phản ánh)

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

Javascript

Chọn tất cả các yếu tố thẻ từ DOM sau đó tạo ra hai randoms giữa 0 và cards.length. Sử dụng eq để chọn phần tử ngẫu nhiên trong các phần tử đã chọn và định vị phần tử đó trước phần tử được chọn ngẫu nhiên khác trong tập hợp các phần tử được chọn.

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/