使用jquery mobile中的for循环</>将<li>添加到<ul> </ul> </li>

时间:2013-04-09 13:26:38

标签: jquery jquery-mobile markup jquery-mobile-listview

我在我的应用程序中使用$ .get()来检索设施名称列表。然后我想将它们作为jquery mobile中的列表项插入到已存在的项目中。当我在html中添加一个元素时,它看起来没问题,但是当我使用for循环时,结果没有任何样式效果。

http://jsfiddle.net/mkamyszek/YDFZ3/1/

<div data-role="page">
            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->

            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-filter="true" id="fieldList">
                    <li>Test</li>
                </ul>
            </div><!-- /content -->

        </div><!-- /page -->

循环输出正确的信息,但由于某种原因,当我使用循环时样式不适用:

for (i=0; i<=5; i++){
$("ul").append("<li>something" + i + "</li>");

}

2 个答案:

答案 0 :(得分:6)

这是因为您需要在添加新内容后重新列出listview。

这样做:

$('#listviewID').listview('refresh');

有时当listview是动态生成的时候,它会要求你在它被设置样式之前初始化它,所以在这种情况下使用它:

$('#listviewID').listview().listview('refresh');

工作示例:http://jsfiddle.net/Gajotres/LrAyE/

这是您的示例中的一个有效示例:http://jsfiddle.net/Gajotres/HuKab/

答案 1 :(得分:2)

在追加项目后使用$('.selector').listview('refresh');

  

<强> Demo

for (i=0; i<=5; i++){
 $("ul").append("<li>something" + i + "</li>");
 $('[data-role=listview]').listview('refresh');
}