jquery - 使刷新功能仅刷新页面的某些部分

Question

在我的 ListView 中，我有几个问题列表，现在我尝试在单击刷新按钮时进行设置， ListView 中的问题将刷新并按随机顺序排列。我想知道是否可以只刷新页面的列表部分而不是整个页面？

 <ul id="list" data-role="listview" data-filter="true" data-filter-reveal="true"      data-filter-placeholder="Search Questions..." data-inset="true" ></ul>
<script>
var jsonfile = 'data.json';
var qData = [];
var qHint = [];

$.getJSON(jsonfile, function(data) {

while (data.activity.length) {
    var index = Math.floor(Math.random() * data.activity.length);
    qData.push(data.activity[index].question);
    qHint.push(data.activity[index].hint);
        data.activity.splice(index, 1)
    }

for (var i = 0; i < 8; i++) {
    question(qData[i], i);
     hint(qHint[i], i);
    $('#text' + (i + 1)).textinput();
    $('#submit' + (i + 1)).button();
    $('#cancel' + (i + 1)).button();

}

function question(data, i) {
    $('#list').append('<li><a href=#mypanel'+ (i + 1)+ '  data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc" id="list">'+ data + '</a></li>'); // list item

}
 function hint(data, i)
 {
    $('#mypanel' + (i + 1)).append("<div align='center' style='margin-top:30px;'><font style='font-family:Helvetica, Arial, sans-serif ;color:white;' size='5px' ><b>Question Hint : </b></font></div><br/><label for=text" + (i + 1) + " id=paneltitle"+ (i + 1)+ " style='margin-top:10px;text-align:center;color:white;'>"+ data + "</label>");// panel item
    $('#paneltitle' + (i + 1)).append('<input type="text" id=text'+ (i + 1) + ' >');
    $('#mypanel' + (i + 1)).append('<a href="#header" data-role="button" id=submit'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="check" style="margin-left:75px;">Submit</a>');
    $('#mypanel' + (i + 1)).append('<a href=#mypanel'+ (i + 1)+ ' data-role="button" id=cancel'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="delete2" style="margin-left:75px;">Cancel</a>');
 }

//Affected part
$('#PageRefresh').click(function() {

          location.reload();

});

$('#list').listview('refresh');
})


       <div data-theme="a" data-role="footer" data-position="fixed">
            <div data-role="navbar">
            <ul>
                <li><a id="PageRefresh" data-icon="refresh">Refresh</a></li>
            </ul>
            </div>
        </div>

Answer 1

这样就可以了；

JSfiddle

HTML

<ul id="myList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<button id="myButton">Click me</button>

JavaScript

'use strict';

Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
    while (s.length) this.push(s.pop());
    return this;
}

$(document).ready(function(){
    $('#myButton').click(function() {
        // Get all children of the <ul>
        var lis = $('#myList').children().get();

        // Shuffle the DOM elements (children) in the array
        lis.shuffle();

        // Empty the <ul> list
        $('#myList').html('');

        // Loop the shuffled array of DOM-elements and put them back in the <ul>
        for (var i = 0; i < lis.length; i++) {
            $('#myList').append(lis[i]);
        }
    });
});

我使用一个干净的示例作为更易于理解的演示。我认为使用一个干净的示例比将代码完全放入循环中更容易理解。

祝你好运!