Выберите 5 случайных элементов списка как массив в jQuery

Question

Я хотел бы иметь кнопку, которая выбирает 5 элементов списка в случайном порядке из несортированного HTML-списка в jQuery. Я также хочу убедиться, что функция сначала проверит, что если есть 5 или менее элементов списка, она просто выберет все доступные элементы списка. Кроме того, я хочу убедиться, что случайный 5 не имеет дубликатов в своем массиве. Кроме того, предположим, что есть 28 элементов списка, я бы хотел, чтобы он выбирал 5 в случайном порядке, которые еще не были выбраны, так как вы можете нажать кнопку несколько раз. Поэтому в основном я хотел бы выбрать 5 в случайном порядке, пока не будет выбран весь список. Вот что я до сих пор.

<ul id="masterlist"> 
    <li><a href="http://www.example1.com" target="_blank">Example 1</a></li> 
    <li><a href="http://www.example2.com" target="_blank">Example 2</a></li> 
    <li><a href="http://www.example3.com" target="_blank">Example 3</a></li> 
    <li><a href="http://www.example4.com" target="_blank">Example 4</a></li> 
    <li><a href="http://www.example5.com" target="_blank">Example 5</a></li> 
    <li><a href="http://www.example6.com" target="_blank">Example 6</a></li> 
    <li><a href="http://www.example7.com" target="_blank">Example 7</a></li> 
    <li><a href="http://www.example8.com" target="_blank">Example 8</a></li> 
    <li><a href="http://www.example9.com" target="_blank">Example 9</a></li> 
</ul> 
<button id="openfiverandom">Open 5 Random</button> 

<script type="text/javascript"> 
    $(function() { 
     $('#openfiverandom').bind('click', function(event) { 
      var links = $('#masterlist li a'); 
      var len = links.length; 
      if (len <= 5) { 
       $('#masterlist li a').each(function() { this.click(); }) 
      } 
      else { 
       while(links.length > 5) { 
        links.eq(parseInt(len * Math.random())).hide(); 
       } 
       links.each(function() { this.click(); }) 
      } 
     }); 
    }); 
</script> 

Это не работает, и он не проверяет наличие дубликатов. Я надеюсь найти лучшее решение здесь в stackoverflow. Также имейте в виду, что ссылки имеют target = "_ blank", что означает, что они все равно будут открыты, это не остановится на первом, так как он не пересылает текущую страницу. Я также думал, что было бы проще просто рандомизировать массив основных списков, а затем разрезать первые пять. Не знаю, как это сделать.

Answer 1

Это решило мою основную проблему, я был имея эту особенность. Пока он работает только в Firefox. У него еще нет все колокола и свистки на нем, но он открывает 5 случайных ссылок. Лучший способ заключался в том, чтобы перетасовать список, а затем разрезать его до первых 5, как я упоминал в своем первом сообщении. Дайте мне знать, если у вас есть вопросы.

jQuery(function ($) { 
    $.fn.shuffle = function() { 
     return this.each(function(){ 
      var items = $(this).children().clone(true); 
      return (items.length) ? $(this).html($.shuffle(items)) : this; 
     }); 
    } 

    $.shuffle = function(arr) { 
     for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); 
     return arr; 
    } 

    $('#openfiverandom').bind('click', function (event) { 
     var links = $.shuffle($('#masterlist li a')).slice(0, 5); 
     links.each(function() { this.click(); }); 
    }); 
}); 

Answer 2

Попробуйте

$(function() { 
    $('#openfiverandom').bind('click', function (event) { 
     var links = $('#masterlist li a'), 
      len = links.length, 
      random, i, $a; 
     if (len <= 5) { 
      links.click(); 
     } else { 
      for (i = 0; i < 5; i++) { 
       random = Math.floor(Math.random() * links.length); 
       $a = links.eq(random).click(); 
       links = links.not($a) 
      } 
     } 
    }); 
}); 

PoC: Fiddle

Примечание: Срабатывание вручную событие щелчка не будет открывать новое окно, так как родной обработчик щелчка не может быть использовано в браузере

Answer 3

Вы можете вручную создать отфильтрованный экземпляр jQuery, как показано ниже:

$('#openfiverandom').bind('click', function (event) { 
    var links = $('#masterlist li a').show(); 
    var len = links.length; 

    var $filtered = $(); //create a new jQuery object we're going to fill 
    var $random; 
    while ($filtered.length < 5 || $filtered.length !== links.length) { 
     $random = links.eq(Math.round(Math.random() * 10); 
     if(!$filtered.contains($random)) $filtered.push($random); //grab some random element from links 
    } 
    $filtered.click(); 
}); 

Edit, думал об этом еще немного по дороге домой и мысли о более удобном решении (который разве действительно случайные) (вы можете упростить немного больше, если необходимо):

$('#openfiverandom').bind('click', function (event) { 
    var links = $('#masterlist li a').show(); 

    var added = 0; 
    var $filtered = links.filter(function() { 
     if(added >= 5) return false; 
     return (links.length - added < 5 || Math.round(Math.random())) && ++added; //++added is going to be truthy 
    }); 
    $filtered.click(); 
});