使用jQuery从另一个页面加载随机元素

Question

I have a page (myPage.aspx) that contains a number of divs. EG.

    <div class="quote">something 1</div>
    <div class="quote">something 2</div>
    <div class="quote">something 3</div>
    <div class="quote">something 4</div>
    <div class="quote">something 5</div>

Using jquery's ajax function, from other pages I would like to:

a) Test how many .quote divs on on the page myPage.aspx

b) Load a random .quote div from myPage.aspx into a specific id div (#myDiv), on my current page.

Would really appreciate any help offers.

Answer 1

You can use something like this:

$.get('/path/to/myPage.aspx', function(data)
{
    var $quotes = $(data).find('div.quote'),
        count = $quotes.length,
        $random = $quotes.eq( Math.floor(Math.random() * count) );

    $('#myDiv').append( $random );
});

See it here in action: http://jsfiddle.net/j2AGL/

Answer 2

You can use jQuery ajax() method to get the content from myPage.aspx and the traverse through its content using jQuery apis. Try this.

$.ajax({
   url: "myPage.aspx",
   success: function(data){
       var $data = $(data);  
       var $quotes = $data.find('div.quote');

       //$quotes.length will give you the number of quote divs in myPage.aspx

       var randomQuote = Math.floor(Math.random() * $quotes.length));
       $('#myDiv').append($quotes.eq(randomQuote));
   }
});

Answer 3

You could use a callback function to achieve this. For example:

This is what should appear on your myPage.aspx:

<div id="result">
    <div class="quote">something 1</div>
    <div class="quote">something 2</div>
    <div class="quote">something 3</div>
    <div class="quote">something 4</div>
    <div class="quote">something 5</div>
</div>

This would be your ajax function:

<script>
$.ajax({
url: '/myPage.aspx',
type: 'get',
success: function(data) {
    var myLen=$(data).children().size(); 
    var myNum=Math.floor(Math.random()*(myLen-1)); 
    var myData=$(data).children().eq(myNum).text(); 
    $("div#myDiv").text(myData);
    }
});
</script>

This function basically: 1. Retrieves all the HTML on your 2nd page 2. Gets the number of that contain a quote 3. Gets a random number between 0 and 1 less than the # of quotes since array's start at 0 in JavaScript 4. Gets the text from the quote with that random number 5. Insert the quote into the #myDiv element.