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

Posted 2023-05-09

【中文标题】动态填充 jQuery Mobile 列表视图内容

【英文标题】：Dynamically populate jQuery Mobile list view content

【发布时间】：2012-01-01 06:56:42

【问题描述】：

我目前在 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 元素应被忽略，因为它是列表的标题。

【参考方案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>");

【讨论】：

对不起，我对此不是很清楚。我的意思是 li 元素的数量不一定要与 classNames 数组的长度相对应。可能有 1 个或可能有 20 个 li 元素。标识给定li 元素感兴趣的classNames 数组的哪个索引的东西由li 标记的periodindex= 方面引用。我已更新问题以显示示例列表。

没问题，我已经修改了答案。

哦，我明白了。好的，因此每个给定的循环实例确实可能会碰到多个列表元素。完美的。 jquery之美

是否可以将其本地化为特定 HTML 元素的子元素？假设该列表位于 id=schedule 的 div 中。

确实有，再看修正答案。