CODEWITHSUNDEEP
jqueryjquery-mobile
MarkO
MarkO

Reputation: 795

Append to list using jquery mobile

I want to loop pages and append/create links to the main content. How can this be done? This is what I have so far.

I'm using jquery mobile.

Thanks.

 $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
         .addClass('ui-body-' + $('div[data-theme]','#index').data('theme'))
         .attr('data-theme', $('div[data-theme]','#index').data('theme'));

 //pages
 $.each(siteData["pages"], function(i,v) {
      //HERE I WANT TO APPEND ID TO href TITLE AND VALUE TO CONTENT
 });

HTML 

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>Loading...</h3>

    </div>

    <div data-role="content">

        <a href="#two" data-role="button">Show page "two"</a>


    </div>

    <div data-role="footer">
        <h4></h4>
    </div><!-- /footer -->
</div>

so what I want to see is something like this....

<div data-role="content">

    <a href="#1" data-role="button">Show page "1"</a>
    <a href="#2" data-role="button">Show page "2"</a>
   <a href="#3" data-role="button">Show page "3"</a>


</div>

etc

Upvotes: 1

Views: 365

Answers (1)

Omar
Omar

Reputation: 31732

Update answer - based on question edit.

$.each(siteData["pages"], function(i,v) {

 // find content div and insert links inside it
 $.mobile.activePage.find('[data-role=content]').append('<a href=' + id + ' data-role="button">' + text + '</a>');

});

Old answer:

 $.each(siteData["pages"], function(i,v) {

 // append href link
 $.mobile.activePage.find('[data-role=content] a').attr('href', siteData.id)

 // append text of <a> link
 $.mobile.activePage.find('[data-role=content] a').html(text);

 // change the header text
 $.mobile.activePage.find('[data-role=header] h3').html(siteData.name);

});

Upvotes: 1

Related Questions