2012-01-31 8 views
0

私はいくつかのdivを含むページ(myPage.aspx)を持っています。例えば。jqueryを使用して別のページからランダムな要素をロードする

私がしたい他のページから、jQueryのAJAX機能を使用して
<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> 

:.quoteはmyPage.aspx

b)はランダムにロードページ上のdiv a)のテストどのように多くの

myPage.aspxから特定のID div (#myDiv)に.quote divをコピーしてください。

本当に助けていただきありがとうございます。

答えて

4

あなたはこのようなものを使用することができます。

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

+0

ありがとうございます。 2本当に良いと働いている答え。 –

2

あなたはjQueryのAPIを使用して、その内容によってmyPage.aspxからコンテンツやトラバースを取得するjQueryのajax()メソッドを使用することができます。これを試して。

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

それはまさに私が後にしたものです。ありがとうございました。 –

1

これを達成するには、コールバック関数を使用できます。たとえば、次のように

これはあなたの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.第2ページのすべてのHTMLを取得します。 2.見積もりを含む数を取得します 3. 0から1の間の乱数を、JavaScriptの配列startが0であるので、引用符よりも少なくする 4.その乱数を持つ引用符からテキストを取得します 5.引用符を#myDiv要素に挿入します。

関連する問題