使用jquery從另一個頁面加載一個隨機元素

Question

我有一個包含多個div的頁面（myPage.aspx）。例如。

<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> 

使用jQuery的AJAX功能，從其他網頁，我想：

a）測試許多.quote怎樣的div在頁面上myPage.aspx

b）加載的隨機.quote div from myPage.aspx into a div id div （#myDiv），on my current page。

真的很感激任何幫助提供。

Answer 1

您可以使用這樣的事情：

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

看到它在這裏的行動：http://jsfiddle.net/j2AGL/

Answer 2

您可以使用jQuery ajax()方法從myPage.aspx通過使用jQuery的API的內容和內容的遍歷。嘗試這個。

$.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

您可以使用回調函數來實現這一點。例如：

這是應該出現在什麼你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> 

這將是你的Ajax功能：

<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> 

基本上這個功能： 1.檢索第二頁上的所有HTML 2.獲取包含引用的數量 3.獲取從0開始的0到1之間的隨機數，小於JavaScript中從0開始的引號數 4.從隨機數中獲取引號中的文本 5.將引號插入#myDiv元素。