Jquery

2010-11-17 8 views
11

ile rasgele divlar gösteriliyor Görüntüler içeren div'ların bir listesi var. Sayfanın yüklediği her seferinde rastgele 4 tane göstermem gerekiyor. İşte başladığım kod.Jquery

<div class="Image"><img src="/image1.jpg"></div> 
<div class="Image"><img src="/image2.jpg"></div> 
<div class="Image"><img src="/image3.jpg"></div> 
<div class="Image"><img src="/image4.jpg"></div> 
<div class="Image"><img src="/image5.jpg"></div> 
<div class="Image"><img src="/image6.jpg"></div> 
<div class="Image"><img src="/image7.jpg"></div> 

Bunların hepsi ekran olarak başlayacaktır: block: yok, ben rastgele div 4. alıp ekrana bunları istiyorum. Bir yerde "Math.random()" ı kullanmam gerektiğini, ancak JQuery'nin bunu nasıl yaptığından emin olmadığımı farz ediyorum. Herhangi bir işaretçi takdir edilecektir.

cevap

16

Sonra bu gibi, en kolay olduğu ilk 4 gösteren rastgele dizerek bulmak:

var divs = $("div.Image").get().sort(function(){ 
      return Math.round(Math.random())-0.5; //so we get the right +/- combo 
      }).slice(0,4); 
$(divs).show(); 

You can test it out here. Ayrıca sipariş (sadece gösterileceği) karıştırmak istiyorsanız, zaten onları çok sıralamış sadece bu değiştirerek yeni sıralarına aynı ebeveyne bunları ekleyin:

$(divs).show(); 
//to this: 
$(divs).appendTo(divs[0].parentNode).show(); 

You can test that version here.

+1

Güzel biri diziye dilimler gerektiğinden fazla işlenmesi ve appendTo eklemekten kaçının. – Phrogz

+0

Bu tekniği kullanarak diziyi sıralama, orijinal konumlara (ilk dört gösterme olasılığı daha yüksektir) yönelir, ancak bu muhtemelen posterin ihtiyaçları için iyidir. – Phrogz

+0

@Phrogz - Olmaması gereken, '-0.5' değerinin olması, '-0.5' veya '0,5' sonuçlarının tüm öğeler için bir ileri/geri sıralama yapması, '0, 1' değil. sadece ileriye doğru olacaktı. –

2
jQuery(function($){ 
    var sortByN = function(a,b){ a=a.n; b=b.n; return a<b?-1:a>b?1:0 }; 
    $.each($('div.Image').map(
    function(){ return { div:this, n:Math.random() }; } 
).get().sort(sortByN), function(i){ 
    if (i<4) $(this.div).show(); 
    }); 
}); 

Bu, her zaman divleri her zaman orijinal ile aynı sırada gösterecektir. Bu kabul edilebilir mi?

3

Bu neye ihtiyacınız yapar: http://www.jsfiddle.net/Yn2pn/1/

$(document).ready(function() { 
    $(".Image").hide(); 

    var elements = $(".Image"); 
    var elementCount = elements.size(); 
    var elementsToShow = 4; 
    var alreadyChoosen = ","; 
    var i = 0; 
    while (i < elementsToShow) { 
     var rand = Math.floor(Math.random() * elementCount); 
     if (alreadyChoosen.indexOf("," + rand + ",") < 0) { 
      alreadyChoosen += rand + ","; 
      elements.eq(rand).show(); 
      ++i; 
     } 
    } 
}); 
+0

Nick Craver'ın cevabı gerçekten çok daha zarif :) –