javascript - 別のdivのJQueryおよび動的サブリスト

Question

典型的なケージとは別のサブリストビューページを作成しようとしています:

これは私がやろうとしていることです:

STEP1 - ループはすべてのデータを取得し、リストビューにリストを作成します。

$(document).ready(function() {

     var data = {"id":[{"id":1,"title":"title1","bodytext":"sometext 1"},{"id":2,"title":"title2","bodytext":"sometext 2"},{"id":3,"title":"title3","bodytext":"sometext 3"}
                   }]

    var output = ''

    $.each(data.id, function(index, value){

       output += '<li><a href="#mypage">'+value.title+'</a></li>';

       $('#mypage').text(value.title); //will this be different for each item?

    });

    $('#mylistview').html(output).listview('refresh'); //Refresh the listview with new added data

});

ステップ2：

リストビューは次のようになります。

<ul id-"mylistview">
   <li><a href="populate_#mypage_with_data_from_item_1">title1</a></li>
   <li><a href="populate_#mypage_with_data_from_item_2">title2</a></li>
   <li><a href="populate_#mypage_with_data_from_item_3">title3</a></li>
</ul>

ステップ 3:

私は既製のテンプレートを持っています：

<div id="mypage">
Data from selected item goes here
</div>

So, if I click on list item 1 mypage will look like this:

<div id="mypage">
Sometext 1
</div>

or if item 2 is clicked:

<div id="mypage">
Sometext 2
</div>

私の問題は、リストビューでどの項目をクリックしても、常に項目 1 からデータを取得することです。

各アイテムに独自のデータが表示されるようにするにはどうすればよいですか?

Answer 1

$(document).ready(function() {
    var data = {"ids":[
         {"id":1,"title":"title1","bodytext":"sometext 1"},
         {"id":2,"title":"title2","bodytext":"sometext 2"},
         {"id":3,"title":"title3","bodytext":"sometext 3"}]};

    var output = '',
        myPages = $('.mypage'),
        container = $('#mylistview');

    $.each(data.ids, function(index, value){
       output += '<li><a href="#mypage">'+value.title+'</a></li>';
       myPages.eq(index).text(value.bodytext);
    });

    container.html(output);

    container.on('click', 'a', function(e){
        e.preventDefault();
        var links = container.find('a');
        alert(myPages.eq(links.index(this)).text());
    });
}); 

デモ: http://jsfiddle.net/mDnE6/

Answer 2

これは、id 呼び出し「pagetitle」を 1 つしか持てないためです。