Jqueryで検索結果を追加する

Question

私のウェブサイトの検索エンジンを少しセットアップしようとしています。各検索結果にdivを追加したいと思います。

success: function(data) { 

      if (data[0] == 'nothing') { 
       result = $('#search-result'); 
       result.append('<h3>' + LANG.nothing + '</h3>'); 
       $('#ajax-load').empty(); 
       return false; 
      } else { 
       jQuery.each(data, function(i, val) { 
        entry = "<h3><a href='" + val.link + "'>" + 
        val.title + '</a></h3>' + '<p>' + 
        val.description + '</p>' + '<p>' + 
        val.tutorials + '</p>' + "<img src='" + 
        val.screenshot + "/>"; 
        result = $('#search-result'); 

        result.append("<div class='span-6'>" + entry + '</div>'); 
       }); 
      } 

しかし確かIAM、jqueryのか、とのより良い方法があります：現時点では、私は次のことを行いますか？

Answer 1

まず空のデータセットでは["nothing"]の代わりに[]を返します。私の代わりにJavaScriptを使用しているHTMLを作成するのではなく、ID #no_search_results_messageを持つオブジェクトの内部で、DOMでいない検索結果のHTMLを持っているだろう、つまり

// -- 
success: function(data) { 
    if (data.length == 0) { 
    $("#no_search_results_message").show(); 
    $("#search_results").hide(); 
    } else { 
    var html = ''; 
    $.each(data, function(i, d) { 
     html += '<h3><a href="' + d.link + '">' + d.title + '</a></h3>' 
     + '<p>' + d.description + '</p>' 
     + '<p>' + d.tutorials + '</p>' 
     + '<img src="' + d.screenshot + '" />'; 
    }); 
    $("#search_results").append(html).show(); 
    $("#no_search_results_message").hide(); 
    } 
} 

：その後、私はこのような何かをしたいです。 RaYellが言及していることもやってみてください。appendを一度だけ呼び出してください。

Answer 2

あなたの代わりに、各反復で、それの一部を追加するのは一度だけ、あなたの結果を追加する場合は、あなたのコードをスピードアップすることができます：

success: function(data) { 
    if (data[0] == 'nothing') { 
     $('#search-result').append('<h3>' + LANG.nothing + '</h3>'); 
     $('#ajax-load').empty(); 
     return false; 
    } else { 
     var items = []; 
     jQuery.each(data, function(i, val) { 
      var entry = "<h3><a href='" + val.link + "'>" + 
      val.title + '</a></h3>' + '<p>' + 
      val.description + '</p>' + '<p>' + 
      val.tutorials + '</p>' + "<img src='" + 
      val.screenshot + "/>"; 

      items.push('<div class="span-6">' + entry + '</div>' 
     }); 

     $('#search-result').append(items.join('')); 
    } 
} 

をDOMが最も遅い操作の一つである変更。

セレクタによって返されたデータを一度使用する予定がある場合は、変数に代入する必要はありませんが、それはあなたに多くの時間を節約できません。

Answer 3

success:function(data) 
{ 
    if (data[0] == 'nothing') 
    { 
     $('#search-result').append('<h3>' + LANG.nothing + '</h3>'); 
     $('#ajax-load').empty(); 
     return false; 
    } 
    else 
    { 
     var entry = '' 
     $.each(data, function(i, val) 
     { 
      entry = "<h3><a href='" + val.link + "'>" + val.title + '</a></h3>' + '<p>' 
     + val.description + '</p>' + '<p>' + val.tutorials + '</p>' + "<img src='" 
     + val.screenshot + "/>"; 
     }); 
     $('#search-result').append("<div class='span-6'>" + entry + '</div>'); 
    } 
}