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

但是我确定，jquery还有更好的方法吗？

Answer 1

如果您只将结果附加一次而不是在每次迭代中附加部分结果，则可以加快代码速度：

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 2

首先，我会为空数据集返回[]而不是["nothing"]。然后，我会做这样的事情：

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

换句话说，我在dom中没有搜索结果的HTML，在ID为#no_search_results_message的对象中，而不是使用javascript创建该HTML。同样做RaYell提到的 - 只调用append一次。

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

使用Jquery添加搜索结果

3 个答案: