Nach dem Zufallsprinzip Element

Question

Ich habe die folgende Markup.

<div class="area 1"> 
    <div id="area-count"> 
     23 
    </div> 
</div> 
<div class="area 2"> 
    <div id="area-count"> 
     52 
    </div> 
</div> 
<div class="area 3"> 
    <div id="area-count"> 
     0 
    </div> 
</div> 
<div class="area 4 friendly"> 
    <div id="area-count"> 
     21 
    </div> 
</div> 
<div class="area 5"> 
    <div id="area-count"> 
     23 
    </div> 
</div> 

Was ich tun möchte, ist alert() die gefundene Nummer in einem der Elemente zufällig ausgewählt. Ich möchte auch kein Element mit einer Klasse von friendly haben bis jetzt habe ich dies, nur zu versuchen und alert() eine zufällige Zahl, bevor ich versuche und negieren die Klasse friendly.

Dies ergibt jedoch nichts ... wo liege ich falsch?

Answer 1

Wie ich sehe niemand sorgfältig liest!

Also mit all das Gute über das classes and ids^w3.org

id = name [CS] rät - Dieses Attribut weist einen Namen auf ein Element. Dieser Name muss in einem Dokument eindeutig sein.

Klasse = cdata-list [CS] Dieses Attribut weist einem Element einen Klassennamen oder eine Gruppe von Klassennamen zu. Jede Nummer von Elementen kann den gleichen Klassennamen oder Namen zugewiesen werden. Mehrere Klassennamen müssen durch Leerzeichen voneinander getrennt sein.

und basierend auf tvanfosson answer:

var elements = $(".area-count").parent().not(".friendly").children(), 
    index = Math.floor (Math.random() * elements.length), 
    item = elements.eq (index); 
alert (item.text()); 

Ich habe einen demo, um nur Elemente zu zeigen, die Eltern keine Klasse hat „.friendly“ ich nur zwei Elemente ohne diese Klasse verlassen. So sind die möglichen Ergebnisse nur 0 oder 52.

Dies ist nicht eine optimale Variante! Es funktioniert, wie die Anforderungen angegeben sind.

Answer 2

1. Ihre ID muss eindeutig sein. Sie sollten <div id="area-count"> zu <div class="area-count">
2. ändern Es ist nicht notwendig, sie zu sortieren. Ermitteln Sie einfach die Anzahl der Elemente (Länge der jQuery) und wählen Sie eine zufällige Zahl zwischen 0 und der Anzahl der Elemente minus 1. Wählen Sie dieses Element aus der Sammlung mit eq.

So:

<div class="area 1"> 
    <div class="area-count"> 
     23 
    </div> 
</div> 
<div class="area 2"> 
    <div id="area-count"> 
     52 
    </div> 
</div> 
<div class="area 3"> 
    <div class="area-count"> 
     0 
    </div> 
</div> 
<div class="area 4 friendly"> 
    <div class="area-count"> 
     21 
    </div> 
</div> 
<div class="area 5"> 
    <div class="area-count"> 
     23 
    </div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    var counts = $('.area-count'), 
     index = Math.floor(Math.random() * counts.length), 
     item = counts.eq(index); 

    alert(item.text()); 
}); 
</script> 

Answer 3

Try this:

$.fn.rand = function(){ 
    return this.eq(Math.floor(Math.random()*this.length)); 
}; 
var randomElement = $('[id="area-count"]:not(.friendly)').rand(); 
alert(randomElement.text()); 

Beachten Sie auch: IDs müssen eindeutig sein, wird das Snippet oben um das durch das Attribut gleich Selektor.

Answer 4

Wie ich bereits über die ids erwähnt habe

randomElement = $(".area-count").get().sort(function(){ 
       return Math.round(Math.random())-0.5}).slice(0,1); 
     alert(randomElement);console.log($(randomElement).text()); 

<div class="area 1"> 
     <div class="area-count"> 
      23 
     </div> 
    </div> 
    <div class="area 2"> 
     <div class="area-count"> 
      52 
     </div> 
    </div> 
    <div class="area 3"> 
     <div id="area-count"> 
      0 
     </div> 
    </div> 
    <div class="area 4 friendly"> 
     <div class="area-count"> 
      21 
     </div> 
    </div> 
    <div class="area 5"> 
     <div class="area-count"> 
      23 
     </div> 
    </div>​