页面加载时的随机Div订单 [英] Random Div Order on Page Load

问题描述

我有一堆ID为gallerycard的div。每当用户访问该页面时，我都需要以随机顺序加载。

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

并且...

这是CSS的小提琴： http://jsfiddle.net/BwJHj/

我知道对于大多数人来说这是一个简单的任务，但我有时还是很在意jquery：（$ / b
$ b

谢谢

解决方案

HTML $ b

首先将所有 id s更改为 classes ，因为 id
$ b

 < div class =gallerycard> 
 code $必须在页面上唯一。
 < div id =girlname> Akulina< / div> 
< div id =girlinfo>不适用< / 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 （由于标记现在使用类，因此切换样式以反映）

  .gallerycard {
 margin：8px; 
 float：left; 
 height：150px; 
 width：221px; 
 background-color：rgba（0，0，0，.3）; 
 border-radius：8px; 
} 
  

Javascript $ b

从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小提琴： http://jsfiddle.net/BwJHj/1/

I have a bunch of divs with the ID "gallerycard". I need them to load in a random order every time the user visits the page.

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

And...

Here's the fiddle with CSS: http://jsfiddle.net/BwJHj/

I know this is a simple task for most of you but I really struggle with jquery at times :(

Thank you

解决方案

HTML

First change all of the ids to classes since id must be unique on a page.

<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 (Since markup now uses classes switch the style to reflect)

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

Javascript

Select all card elements from the DOM then generate two randoms between 0 and cards.length. Use eq to select a random element in the selected elements and position it before another randomly selected element in the set of selected eleemnts.

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/

这篇关于页面加载时的随机Div订单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！