清除列表视图内容答案

【问题标题】：Clearing the listview contents清除列表视图内容
【发布时间】：2014-02-10 19:53:20
【问题描述】：

我在这里创建了一个代码，可以通过按下按钮将数组内容存储到列表视图中，我的问题是列表视图内容会堆叠。每次按下按钮时，我都想清除以前的列表视图内容，并能够再次显示更新后的存储数组内容。

    <div id="MainPage" data-role="page" >

        <div data-role="content">

            <a href="#ViewPage" data-role="button" onClick="displayArray( )">RENAME</a>

        </div>

    </div>

    <div id="ViewPage" data-role="page" >

        <div data-role="header" data-position="fixed">
            <a href="#MainPage" data-role="button" data-icon="back">BACK</a>
            <h1>View Page</h1>
        </div>

        <div data-role="content">
            <ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Sample Contents" data-inset="true">
                     <!-- array contents goes here -->
            </ul>   
        </div>

    </div>  

    <script>

         var sampleContent = new Array( );

        displayArray( )
        {
        //i want to place a code here that would clear the listview contents
            for(var scan=0; scan<sampleContent.length; detect++)
            {
                 //looping of the array contents into the listview  
                 $('#viewlist').append('<li><a href="#">' + sampleContent[scan] + '</a></li>').listview("refresh");
            }       
        }

    </script>

我现在被这个问题困住了，任何帮助或建议都将很高兴在此先感谢。

【问题讨论】：

你能展示你的sampleContent()函数吗
sampleContent 是我用来将数据存储到列表视图中的数组。我想在 for 循环之前清除 displayArray() 函数中的列表视图。我试过 ('#viewlist').empty();但之后不再添加列表视图内容。

标签： javascript jquery listview jquery-mobile

【解决方案1】：

这应该可以完成工作。只需添加所有数据，然后清空列表并附加所有字符串以获得更快的结果。

    displayArray( )
    {
    //i want to place a code here that would clear the listview contents
    var data='';    
    for(var scan=0; scan<sampleContent.length; detect++)
        {
            data+='<li><a href="#">' + sampleContent[scan] + '</a></li>';
        }
     $("#viewlist").empty().append(data);        
    }

【讨论】：

这可行，但列表视图设计在第二次输入后消失，触发 displayArray() 函数的第二个实例。这是我的输出的屏幕截图。 i.imgur.com/IN7UIOA.jpg
只需在最后一行末尾添加 .listview("refresh") 即可：$("#viewlist").empty().append(data).listview("refresh");

【解决方案2】：

我最近处理过列表，这就是我的做法：

displayArray( )
    {
    //Emptys viewlist
    $('#viewlist').empty();
    //i want to place a code here that would clear the listview contents
        for(var scan=0; scan<sampleContent.length; detect++)
        {
             //looping of the array contents into the listview  
             $('#viewlist').append('<li><a href="#">' + sampleContent[scan] + '</a></li>');
        }  
        //Update list  
        $("#viewlist").listview("refresh");   
    }

你必须清空，追加然后更新。

【讨论】：