Question

我正在尝试使用show / hide点击按钮显示随机元素。它设置为首先隐藏元素以停止重复，然后显示。但有时它并没有表现出来。

小提琴比我的解释更清晰：http://jsfiddle.net/qAfqN/。

简化代码：

    this.uiSelect = function(){
    var length = $("#ui li").length;
    var ran = Math.floor(Math.random()*length);
        $('#ui li').hide();
    $("#ui li:nth-child(" + ran + ")").show();
};

    $(document).ready(function(){   
    $('#mangle').click(function(){
        uiSelect();
    }); 
});

Answer 1

使用:eq()代替:nth-child()。它们有着截然不同的含义。前者指的是元素在jQuery集合中的位置，而后者指的是它在DOM兄弟中的位置。这些情况在您的情况下并不相同。

考虑以下标记：

 div
    > ul
        > li 1
        > li 2
    > ul
        > li 3
        > li 4
        > li 5

查询$('div li:eq(2)')将返回li 3（索引从零开始），因为这是集合中的第三个元素。另一方面，$('div li:nth-child(3)')（索引在这里是一个基础，这就是为什么我写了3而不是2）将返回li 5，因为这是它的兄弟姐妹中唯一的第三个元素

如果您使用.eq()代替:eq()，并且有些链接像这样，您甚至可以节省一些难看的字符串连接和重复的DOM查找：

$("#ui li").hide().eq(ran).show();

jsFiddle Demo

Answer 2

试试这个，但我不确定这是否是您想要的http://jsbin.com/ibasuv/1/edit

var pickRandom = function(selector){
  var lis = $(selector).find('li');
  lis.hide();

  var size = lis.size();

  var random = Math.floor(Math.random()*size);
  $(selector).find('li').eq(random).show();
};

我为第二个div设置了一个div结束标记，我想

jQuery show和hide不能始终如一地工作

2 个答案: