ランダムに要素を選択しています

Question

次のマークアップがあります。私がやりたい何

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

はalert()ランダムに選んだ要素の一つにされた数です。私はまた、これまでにfriendlyのクラスを持つ要素を持たないことを願っています。alert()を試してみる前に、私はクラスを無効にします。friendly。

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

これは何も出力しません...どこが間違っていますか？

Answer 1

について述べてきたように！この属性は、要素に名前を割り当て - すべての良いとそう

はclasses and ids^w3.org

ID =名[CS]についてアドバイスします。この名前は で、ドキュメント内で一意である必要があります。

class = cdata-list [CS]この属性 は、要素にクラス名またはクラス名のセットを割り当てます。要素の任意の数 に同じクラス名が割り当てられます。 複数のクラス名は、空白文字で区切る必要があります。

とtvanfosson answerに基づく：

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

私はdemoをした、唯一の要素を示すために、その親は何のクラスは「.friendly」私はこのクラスなしで唯一の2つの要素を残していません。可能な結果は0または52だけです。

これは、ではなく、です。それは要件が記載されているように働いています。

Answer 2

1. あなたのIDは一意である必要があります。あなたは変更する必要があります<div id="area-count">を<div class="area-count">
2. ソートする必要はありません。アイテム数（jQueryの長さ）を調べ、0からアイテム数-1を引いた乱数を選択するだけです。eqを使用してコレクションからこのアイテムを選択してください。このよう

：

<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

はこれを試してみてください：

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

はまた、注意してください：IDのは、一意である必要があり、上記のスニペットは属性を使用して、その周りを取得セレクタに等しいです。

Answer 4

誰もが慎重に読まない私は見ての通り、私はすでにIDS

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