动态填充 jQuery Mobile 列表视图内容

Question

我目前在 jQuery mobile 中使用动态生成的列表视图来显示来自数据库的一堆数据。虽然大部分内容都在数据库中，并且在页面加载之前由 django 生成，但我还想将一些内容插入到使用 HTML5 localStorage 存储的列表视图元素中。

因此，这些数据只能通过 javascript 访问，而不是 django 后端。我设想将一些 javascript 绑定到 pagebeforecreate 事件。在此之后，我需要以某种方式遍历ul 中的所有li 元素（我有它的id），除了第一个（因为那是分隔符）。

之后它变得有点棘手。假设我已经在 javascript 中加载了一个从 localStorage 获取信息的数组。叫它classNames。我已经为每个li 分配了一个自定义属性期间索引，以标识给定li 应该作为文本接收的classNames 数组的哪个索引。

更新

例如，给定列表的内容在被查询增强之前的样子。

    <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 元素，并将“类名放在此处”的内容替换为li 的periodindex 属性指定的索引处的classNames 数组对象的内容元素。另请注意，列表中的第一个 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>");
}