jQuery Mobile Cookbook: C5R9 - Dynamic Data List - Array

fiddle.html

<div data-role="page">

  <div data-role="header">
    <h1>Dynamic List - Array</h1>
  </div>

  <div data-role="content">

    <ul data-role="listview" id="myList"></ul>

  </div>

</div>

fiddle.js

// Array of items to be injected into the list
var arrItems = [
  "Ben Folds Five",
  "Cake",
  "Gomez",
  "Guster"
];

$( document ).ready( function() {
  // Set your list element into a variable
  var $myList = $( "#myList" );
  var newItems = [];
  
  // Loop through your results and append a new <li> onto your list for each result
  $.each( arrItems, function( index, value ) {
    newItems.push( "<li><a href='index.html?id=" + index + "'>" + value + "</a></li>" );
  });

  // Append the new items to your list
  $myList.append( newItems.join( "" ) );

  // Refresh the listview to apply jQuery Mobile formatting to new items
  $myList.listview( "refresh" );
});

fiddle.manifest

name: jQuery Mobile Cookbook C5R9 - Dynamic Data List - Array
description: Example of populating a list using an array in jQuery Mobile
authors:
  - Don Walter
resources:
  - http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js
  - http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css
normalize_css: no

http://jsfiddle.net/gh/gist/jquery/1.7.1/2552018/

http://jsfiddle.net/gh/gist/jquery/1.8/2552018/