Dynamically populate jQuery Mobile watchlist content

Question

I am currently using a dynamically generated list view in a jQuery mobile device to display a bunch of data from a database. Although most of this content is in the database and generated by django before the page loads, there is also some content that I would like to insert into the list view elements that are stored using HTML5 localStorage.

As a result, this data can only be accessed through javascript, and not in django. I suggest binding some javascript to the pagebeforecreate event. After that, I need to somehow sort through all the li elements in ul (I have its id ), except for the first one (since this is a separator).

After that, it becomes a little difficult. Suppose I have an array already loaded in javascript that was retrieving information from localStorage. Name it classNames . I assigned a period index of the user property to each li that determines which index of the classNames array the given li should receive as text.

UPDATE

For example, this content of this list looks as if it should be expanded upon request.

  <li data-role="list-divider">Regular Schedule/li> <li periodindex="5" type="schedule"> <h1 class="ui-li-heading">6</h1> <p class="ui-li-maintext"><i>class name goes here</i></p> <p class="ui-li-aside"><b>7:30</b> - <b>8:30</b></p> <p class="ui-li-count">60</p> </li> <li periodindex="3" type="schedule"> <h1 class="ui-li-heading">6</h1> <p class="ui-li-maintext"><i>class name goes here</i></p> <p class="ui-li-aside"><b>8:45</b> - <b>9:50</b></p> <p class="ui-li-count">65</p> </li> <li periodindex="7" type="schedule"> <h1 class="ui-li-heading">6</h1> <p class="ui-li-maintext"><i>class name goes here</i></p> <p class="ui-li-aside"><b>10:00</b> - <b>12:00</b></p> <p class="ui-li-count">120</p> </li> <li periodindex="0" type="schedule"> <h1 class="ui-li-heading">6</h1> <p class="ui-li-maintext"><i>class name goes here</i></p> <p class="ui-li-aside"><b>1:00</b> - <b>4:00</b></p> <p class="ui-li-count">180</p> </li> 

I need a way to iterate over all the specified li elements and replace the contents of the “class name” here with the contents of the classNames array object at the index specified by the periodindex li element property. Also note that the first li element in the list should be ignored, as it is the heading of the list.

Answer 1

Assuming the classNames array is in the same order as the LI elements that appear on your page, try the following:

Updated according to OPs answers

 for (var i = 0; i < classNames.length; i++) { $("#schedule li[periodindex='" + i + "']").find(".ui-li-maintext").html("<i>" + classNames[i] + "</i>"); }