Динамическое заполнение содержимого списка просмотра jQuery Mobile

Question

В настоящее время я использую динамически генерируемое представление списка в jQuery mobile для отображения набора данных из базы данных. Хотя большая часть этого содержимого находится в базе данных и генерируется django до загрузки страницы, есть также некоторое содержимое, которое я хотел бы вставить в элементы представления списка, которые хранятся с использованием HTML5 localStorage.

В результате к этим данным можно получить доступ только через javascript, а не через бэкэнд django. Я предполагаю привязать некоторый JavaScript к событию pagebeforecreate. После этого мне нужно как-то перебрать все элементы li внутри ul (у меня есть id), кроме первого (так как это делитель).

После этого становится немного сложно. Предположим, у меня уже есть массив, загруженный в javascript, который извлек информацию из localStorage. Назовите это classNames. Я назначил индекс периода пользовательского свойства каждому li, определяющему, какой индекс массива classNames данный li должен получить в виде текста.

UPDATE

Например, это содержимое заданного списка, которое выглядит до того, как будет расширено запросом.

    <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>

Мне нужен способ перебрать все заданные элементы li и заменить содержимое «имя класса идет сюда» содержимым объекта массива classNames с индексом, указанным свойством periodindex свойства li элемент. Также обратите внимание, что первый элемент li в списке следует игнорировать, так как он является заголовком списка.

Answer 1

Предполагая, что массив classNames находится в том же порядке, в котором элементы LI появляются на вашей странице, попробуйте следующее:

Обновлено согласно ответам OP

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