【问题标题】:Add <li> to <ul> with for loop in jquery mobile在jquery mobile中使用for循环将<li>添加到<ul>
【发布时间】:2013-04-09 13:26:37
【问题描述】:

我在我的应用程序中使用 $.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>");

}

【问题讨论】:

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


    【解决方案1】:

    那是因为你需要在添加新内容后重新设置列表视图的样式。

    这样做:

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

    有时当动态生成列表视图时,它会要求您在对其进行样式设置之前对其进行初始化,因此在这种情况下使用此:

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

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

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

    【讨论】:

    • 这样做了,$("#fieldList").append("
    • " + facility.facility[i].name + "
    • ").listview('refresh' );
    【解决方案2】:

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

    Demo

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

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签