开发者

Get Random item using jQuery

Just starting learning about ajax requests using jQuery. I've tried looking at other posts on this but not sure how to implement it. Here's the code I have. Right now it's just getting the first 3 items. I want it to get 3 random items from the rss feed it's pulling. Here's what I have:

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 = $(descri开发者_C百科ption).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
});

What are my options?

Thanks!


I'd use something like filter(), rather than slice(), after generating 3 unique numbers in your range:

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...
});

Be warned that this would stick in an infinite loop if the number of items returned is less than 3, because it generates 3 unique numbers within the range 0 - items length. You could take away the while loops and just generate 3 non-unique randoms if this was a possibility.

Here's an example that removes 3 divs at random using this code: http://jsfiddle.net/dAjAt/. Keep clicking the Run button to see it in action.


you could use the shuffle-plugin to shuffle your array. the code would be something like:

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


If you only want 3 items, your server should only return 3 items.

Non-the-less, if you want to achieve this with 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);
}

Then instead of using $('item', d).slice(0, 3).each, simply use $('item', d).random(3).each

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜