动态填充jQuery Mobile的列表视图内容 [英] Dynamically populate jQuery Mobile list view content

问题描述

我目前正在使用jQuery Mobile的动态生成的列表视图中显示来自数据库的一组数据。虽然大部分内容是在数据库和加载页面之前由Django的产生，也有一些内容我想插入一个使用HTML5的localStorage存储列表视图元素。

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.

其结果是，此数据只能通过javascript访问，而不是django的后端。我设想结合一些JavaScript的 pagebeforecreate 事件。在此之后，我需要通过所有的里莫名其妙环的 UL （我有它的<$ C中的元素$ C> ID ），除第一次（因为这就是分频器）。

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

之后，它变得有点棘手。假设我在JavaScript已经加载了一个数组已经从获取localStorage来的信息。说它类名。我分配了一个自定义属性期指数，每个里确定其中类名数组的索引给定的里应该接受为文本。

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.

更新

例如这与看起来像之前给定的列表的内容通过查询增强。

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>

我需要一种方法来遍历所有给定的里元素，并与类名数组对象的索引指定的内容替换的类的名字放在这里的内容由里元素的 periodindex 属性。还需要注意的是，因为它是列表的标题列表中的第一个里元素应该被忽略。

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.

推荐答案

假设类名数组是在同一顺序的 LI 元素出现在您的网页，尝试这个办法：

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

更新按有机磷农药的响应

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

这篇关于动态填充jQuery Mobile的列表视图内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！