jquery - 动态填充 jQuery Mobile ListView 内容

Question

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

因此，这些数据只能通过 javascript 访问，而不能通过 django 后端访问。我设想将一些 javascript 绑定(bind)到 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 元素，并将“类名位于此处”的内容替换为由 periodindex 指定的索引处的 classNames 数组对象的内容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>");
}