Question

I currently am using a dynamically generated list view in jQuery mobile 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 is loaded, there is also some content I’d like to insert into the list view elements that is stored using HTML5 localStorage.

As a result, this data can only be accessed via javascript, not the django backend. I envision binding some javascript to the pagebeforecreate event. After this, I need to somehow loop through all of the li elements within the ul (I have its id), except the first (since thats the divider).

After that it gets a bit tricky. Assume that I have an array already loaded up in javascript that has fetched the info from localStorage. Call it classNames. I’ve assigned a custom property period index, to each li identifying which index of the classNames array the given li should receive as text.

UPDATE

For example this the contents of a given list with look like before being enhanced by query.

    <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 loop through all the given li elements and replace the contents of “class name goes here” with the contents of the classNames array object at index specified by the periodindex property of the li element. Note also that the first li element in the list should be ignored as it is the title of the list.

Answer 1

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

Updated as per OPs responses

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