Losowa kolejność na stronie Ładowanie

Question

Mam kilka elementów div z identyfikatorem "gallerycard". Potrzebuję ich ładować w losowej kolejności za każdym razem, gdy użytkownik odwiedza stronę.

<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> 

I ...

Oto skrzypce z CSS:http://jsfiddle.net/BwJHj/

wiem, że jest to proste zadanie dla większości z was, ale ja naprawdę walczyć z jQuery czasami :(

Dziękuję

Answer 1

HTML

Pierwsza wymiana wszystkich id s do classes od id musi być unikalna na stronie.

<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 (Od znaczników używa teraz zajęcia przełączyć styl odzwierciedlać)

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

Javascript

Wybierz wszystkie elementy karty z DOM następnie wygenerować dwa randoms między 0 a cards.length. Użyj eq, aby wybrać losowy element w wybranych elementach i umieść go przed innym losowo wybranym elementem w zbiorze wybranych elememntów.

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/