如何使用jquery重寫這個函數

Question

我想用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); 
    } 
} 

Answer 1

它是一個壞主意，不斷追加在循環中的DOM相同的元素。這意味着每增加一個新元素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('')); 
} 

這將創建一個數組將所有的「孩子」在裏面。一旦所有結果都循環播放，它會清空#resultList並追加所有的孩子。

Answer 2

function searchDone(results) { 
    var result = null; 
    var item = ''; 
    $('#resultList').empty(); 
    for (var i = 0; i < results.SearchResponse.Image.Results.length; i++) { 
     result = results.SearchResponse.Image.Results[i]; 
     item = '<li>' + 
       '<a href="' + result.MediaUrl + '"> ' + 
        '<img src="' + result.Thumbnail.Url + '" alt="' + result.Title + '"/>' + 
       '</a>' + 
       '</li>'; 
     $('#resultList').append(item); 
    } 
} 

Answer 3

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

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

---

正如@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); 
} 

Answer 4

如果你不約「由一個顯示一個消息，一個」中的感覺效果護理你可以用代碼一點點顯示它一起......這樣

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('')); 
} 

否則你可以有這樣一個很好的淡出效果，：

DEMO：http://jsbin.com/odimi4

function searchDone(results) { 
    $.each(results.SearchResponse.Image.Results, function(i,item)) { 
     $('<li class="resultlistitem">').html('<a href="' + item.MediaUrl +'">'+ 
      '<img src="' +item.Thumbnail.Url +'" alt="' + item.Title +'" /></a>') 
      .appendTo('#resultList').delay(i+'000').fadeOut(200,function(){$(this).remove()}); 
    }); 
} 

個

Answer 5

假設你的結果是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); 
    }