如何使用jquery重写此函数

我正在尝试使用jquery编写更短的代码。在jquery中重写此函数的最佳方法是什么

function searchDone(results) {
    var result = null;
    var parent = document.getElementById('resultList');
    parent.innerHTML = '';
    var child = null;

    for (var i = 0; i < results.SearchResponse.Image.Results.length; i++) {
        result = results.SearchResponse.Image.Results[i];
        child = document.createElement('li');
        child.className = "resultlistitem";

        child.innerHTML = '<a href="' + result.MediaUrl +'"><img src="' +
            result.Thumbnail.Url +'" alt="' + result.Title +'" /></a>';

        parent.appendChild(child);
    }
}

函数搜索完成（结果）{
var结果=null；
var parent=document.getElementById（'resultList'）；
parent.innerHTML=''；
var child=null；
for（var i=0；i

函数搜索完成（结果）{
var结果=null；
var项目=“”；
$（“#结果列表”）.empty（）；
for（var i=0；i”+
'' +
“”；
$（“#结果列表”）。追加（项目）；
}
}

函数搜索完成（结果）{
var结果=null；
var项目=“”；
$（“#结果列表”）.empty（）；
for（var i=0；i”+
'' +
“”；
$（“#结果列表”）。追加（项目）；
}
}

函数搜索完成（结果）{
var r，
p=$（“#结果列表”）.empty（），
arr=results.SearchResponse.Image.results；
对于（变量i=0；i
）；
}   
}

---

正如@Petersen已经指出的那样，应该避免在循环内部进行DOM操作。下面的替代代码将通过循环创建HTML源代码字符串，并立即追加整个字符串

function searchDone(results) {
    var r,
        p = $('#resultList').empty(),
        arr = results.SearchResponse.Image.Results,
        s = '';

    for (var i = 0; i < arr.length; i++) {
        r = arr[i];
        s += '<li class="resultlistitem"><a href="' + r.MediaUrl + '"><img src="' + r.Thumbnail.Url + '" alt="' + r.Title + '" /></a><li>';
    }

    p.append(s);
}

函数搜索完成（结果）{
var r，
p=$（“#结果列表”）.empty（），
arr=results.SearchResponse.Image.results，
s=''；
对于（变量i=0；i
）；
}   
}

---

正如@Petersen已经指出的那样，应该避免在循环内部进行DOM操作。下面的替代代码将通过循环创建HTML源代码字符串，并立即追加整个字符串

function searchDone(results) {
    var r,
        p = $('#resultList').empty(),
        arr = results.SearchResponse.Image.Results,
        s = '';

    for (var i = 0; i < arr.length; i++) {
        r = arr[i];
        s += '<li class="resultlistitem"><a href="' + r.MediaUrl + '"><img src="' + r.Thumbnail.Url + '" alt="' + r.Title + '" /></a><li>';
    }

    p.append(s);
}

函数搜索完成（结果）{
var r，
p=$（“#结果列表”）.empty（），
arr=results.SearchResponse.Image.results，
s=''；
对于（变量i=0；i

函数搜索完成（结果）{
var-lis=[]；
$.each（results.SearchResponse.Image.results，函数（i，项）{
lis.push（'
）；
})$（'#resultList'）.html（lis.join（''）；
}

否则，只需一点代码，您就可以获得如下良好的淡出效果：

演示：

函数搜索完成（结果）{
$.each（results.SearchResponse.Image.results，函数（i，项））{
$（'
）.html（''）
.appendTo（'#resultList'）.delay（i+'000'）.fadeOut（200，function（）{$（this.remove（）}）；
}); 
}

如果您不关心“一条一条地显示一条消息”的效果，您可以将其全部显示在一起。。。像这样

function searchDone(results) {
    var lis = [];
    $.each(results.SearchResponse.Image.Results, function(i,item){
    lis.push('<li class="resultlistitem"><a href="' + item.MediaUrl +'"><img src="' +
            item.Thumbnail.Url +'" alt="' + item.Title +'" /></a></li>');
    }); $('#resultList').html( lis.join('') );
}

函数搜索完成（结果）{
var-lis=[]；
$.each（results.SearchResponse.Image.results，函数（i，项）{
lis.push（'
）；
})$（'#resultList'）.html（lis.join（''）；
}

否则，只需一点代码，您就可以获得如下良好的淡出效果：

演示：

函数搜索完成（结果）{
$.each（results.SearchResponse.Image.results，函数（i，项））{
$（'
）.html（''）
.appendTo（'#resultList'）.delay（i+'000'）.fadeOut（200，function（）{$（this.remove（）}）；
}); 
}

假设您的结果是JSON

    function searchDone(results) {
     $("#resultList").empty();
     html = "";

//creating this as a string and appending at the end is faster than appending each element 'live' - depends how many search results you have
    $.each( results.SearchResponse.Image.Results, function(key,result){
      html +='<li><a href="' + result.MediaUrl +'"><img src="' +
                result.Thumbnail.Url +'" alt="' + result.Title +'" /></a></li>';
     });
     $("#resultList").append(html);
    }

函数搜索完成（结果）{
$（“#结果列表”）.empty（）；
html=“”；
//将其创建为字符串并在末尾追加要比将每个元素“live”追加快—这取决于您有多少搜索结果
$.each（results.SearchResponse.Image.results，函数（键，结果）{
html+='
'；
});
$（“#结果列表”）.append（html）；
}

假设您的结果是JSON

    function searchDone(results) {
     $("#resultList").empty();
     html = "";

//creating this as a string and appending at the end is faster than appending each element 'live' - depends how many search results you have
    $.each( results.SearchResponse.Image.Results, function(key,result){
      html +='<li><a href="' + result.MediaUrl +'"><img src="' +
                result.Thumbnail.Url +'" alt="' + result.Title +'" /></a></li>';
     });
     $("#resultList").append(html);
    }

函数搜索完成（结果）{
$（“#结果列表”）.empty（）；
html=“”；
//将其创建为字符串并在末尾追加要比将每个元素“live”追加快—这取决于您有多少搜索结果
$.each（results.SearchResponse.Image.results，函数（键，结果）{
html+='
'；
});
$（“#结果列表”）.append（html）；
}

在DOM in循环中不断地附加到同一元素是个坏主意。这意味着每次添加新元素时，DOM都会被重新绘制

执行以下操作以仅追加一次：

function searchDone(results) {
 var list = [];
    $.each(results.SearchResponse.Image.Results, function(i, v) {
        list.push('<li class="resultlistitem"><a href="' + v.MediaUrl +'"><img src="' + v.Thumbnail.Url +'" alt="' + v.Title +'" /></a></li>');
    });
 $('#resultList').empty().append(list.join(''));
}

函数搜索完成（结果）{
var列表=[]；
$.each（results.SearchResponse.Image.results，function（i，v）{
list.push（'
）；
});
$（'#resultList'）.empty（）.append（list.join（''）；
}

---

这将创建一个数组，该数组将包含其中的所有“子对象”。一旦each as循环了所有结果，它就会清空

#resultList

并附加所有子元素。

在DOM in循环中不断附加到同一元素是个坏主意。意思是