Получить случайный элемент, используя jQuery

Question

Просто начинаю изучать запросы ajax, используя jQuery. Я пытался посмотреть другие посты по этому вопросу, но не уверен, как это реализовать. Вот код, который у меня есть. Прямо сейчас он только получает первые 3 пункта. Я хочу, чтобы он получил 3 случайных элемента из RSS-канала, который он тянет. Вот что у меня есть:

jQuery(document).ready(function($) {
    $.ajax({
        url: "http://thrive.local/wp-content/themes/thriveafrica/fetcher.php",
        type: "GET",
        success: function(d) {
                $('item', d).slice(0, 3).each(function() {
                    var $item = $(this);
                    var title = $item.find('title').text();
                    var link = $item.find('link').text();
                    var description = $item.find('description').text();
                    var image = $(description).find('img').attr('src');
                    var price = $(description).find('span.SalePrice').text();
                    if (price == '') {price = 'Visit Store for Price'};

                    var html = '<li><a href="'+link+'" target="_blank">';
                    html += '<div class="image"><img src="'+image+'"></div>';
                    html += '<div class="info"><strong>'+title+'</strong><br/>'+price+'</div>';
                    html += '</a></li>';

                    // Example Output
                    // <li>
                // <div class="image"><img src="http://www.thriveafricastore.com/product_images/s/041/coffee__59525_thumb.jpg"></div>
                // <div class="info"><strong>Thrive Africa Blend (1lb)</strong><br>See Price</div>
              // </li>


                    $('div#store ul').append($(html));
                }); //End Each
        } //End Success
    }); // End Ajax Request
});

Какие у меня варианты?

Спасибо!

Answer 1

Я бы использовал что-то вроде filter () , а не slice () , после генерации 3 уникальных чисел в вашем диапазоне:

var rnd1, rnd2, rnd3, undef,
    items = $('item', d);

// Generate our random numbers:
rnd1 = Math.floor(Math.random()*items.length);
while (rnd2 == undef || rnd2 == rnd1)
    rnd2 = Math.floor(Math.random()*items.length);
while (rnd3 == undef || rnd3 == rnd1 || rnd3 == rnd2)
    rnd3 = Math.floor(Math.random()*items.length);

//filter our items, only the ones whose index matches one of our randoms:
items.filter(function (index) { 
    return index == rnd1 || index == rnd2 || index == rnd3;
}).each(function {
    // rest of code...
});

Имейте в виду, что это может застрять в бесконечном цикле, если количество возвращаемых элементов меньше 3, поскольку оно генерирует 3 уникальных числа в диапазоне 0 - длина элементов .Вы могли бы убрать циклы while и просто сгенерировать 3 неуникальных рандома, если бы это было возможно.

Вот пример, который удаляет 3 делителя случайным образом с помощью этого кода: http://jsfiddle.net/dAjAt/. Keepнажав кнопку Run , чтобы увидеть ее в действии.

Answer 2

Если вам нужно только 3 элемента, ваш сервер должен вернуть только 3 элемента.

Тем не менее, если вы хотите добиться этого с помощью JavaScript:

jQuery.fn.random = function (amount) {
  var els = this.get();
  var ret = [];

  while (els.length && ret.length < amount) {
    ret.push(els.splice(Math.floor(Math.random() * els.length), 1)[0]);
  }

  return $(ret);
}

Тогда вместо использования $('item', d).slice(0, 3).each просто используйте $('item', d).random(3).each

Answer 3

вы можете использовать shuffle-plugin , чтобы перемешать ваш массив. код будет что-то вроде:

var myresults = $('item', d).shuffle();
myresults.slice(0, 3).each(function() {
    // ...
}