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

在我的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>

var jsonfile='data.json'；
var qData=[]；
var qHint=[]；
$.getJSON（jsonfile，函数（数据）{
while（data.activity.length）{
var index=Math.floor（Math.random（）*data.activity.length）；
push（data.activity[index].question）；
qHint.push（data.activity[index].hint）；
数据.活动.拼接（索引，1）
}
对于（变量i=0；i<8；i++）{
问题（qData[i]，i）；
提示（qHint[i]，i）；
$（'#text'+（i+1））.textinput（）；
$（“#提交”+（i+1））.button（）；
$（“#取消”+（i+1））.button（）；
}
函数问题（数据，i）{
$（“#列表”）。追加（“
”）；//列表项
}
函数提示（数据，i）
{
$（'#mypanel'+（i+1））.append（“问题提示：
“+data+”）；//面板项
$（'#paneltitle'+（i+1））.append（''）；
$（“#mypanel”+（i+1））.append（“”）；
$（“#mypanel”+（i+1））.append（“”）；
}
//受影响部分
$（“#页面刷新”）。单击（函数（）{
location.reload（）；
});
$（'#list'）。列表视图（'refresh'）；
})

刷新

这样就可以了

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]);
        }
    });
});

“严格使用”；
Array.prototype.shuffle=函数（）{
var s=[]；
而（this.length）s.push（this.splice（Math.random（）*this.length，1）[0]）；
而（s.length）这个.push（s.pop（））；
归还这个；
}
$（文档）.ready（函数（）{
$（“#myButton”）。单击（函数（）{
//获取

var lis=$（'#myList'）.children（）.get（）；
//洗牌数组中的DOM元素（子元素）
lis.shuffle（）；
//清空
列表
$（'#myList'）.html（''）；
//循环DOM元素的无序数组，并将它们放回

对于（变量i=0；i

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

---

祝你好运

您可以将ParentNode（目标ID）的DOM ChildrenNodes放入数组中，然后将其洗牌并将其绑定回父节点。您好，谢谢您的回答。当我按下f5按钮时，列出的功能u正在工作，但我如何才能申请该按钮？现在我有一个按钮，单击刷新按钮，它将只刷新列表部分。而不是$（document）。ready（function（），我使用$（'#PageRefresh'）。单击（function（））？我已经更新了我的答案。ready函数需要让jQuery等待页面内容完全加载。这是常见的做法。我在答案中添加了带有HTML示例的click函数。明智的做法是将所有jQuery放在ready函数中。只有函数和全局变量在它之外。还添加了JSFIDLE；