Question

I have the following 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>

What I wish to do is alert() the number found in one of the elements picked at random. I also wish not to have any element with a class of friendly so far I have this, just to try and alert() a random number before I try and negate the class friendly.

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

This however outputs nothing… where am I going wrong?

Answer 1

As I see nobody reads carefully!

So with all the good advises about the classes and ids^w3.org

id = name [CS] – This attribute assigns a name to an element. This name
must be unique in a document.

class = cdata-list [CS] This attribute
assigns a class name or set of class names to an element. Any number
of elements may be assigned the same class name or names. Multiple
class names must be separated by white space characters.

and based on tvanfosson answer :

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

I made a demo, in order to show only elements, which parents has no class ".friendly" I left only 2 elements without this class. So the possible results will be only 0 or 52.

This, is not an optimal variant! It is working as the requirements are stated.