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

你的身份必须是独一无二的。您应该将<div id="area-count">更改为<div class="area-count">
没有必要对它们进行排序。只需弄清楚项目数量（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 2

试试这个：

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

另请注意：ID必须是唯一的，上面的代码段通过使用属性equals selector来解决这个问题。

Answer 3

正如我已经提到的关于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>

Answer 4

我看到没有人仔细阅读！

关于classes and ids^w3.org

的所有好建议

id = name [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。

这是不的最佳变体！它符合要求。

随机选择元素

4 个答案: