文章/答案/技术大牛

发布

问使用Jquery添加搜索结果
EN

Stack Overflow用户

提问于 2009-08-07 14:04:42

回答 3查看 177关注 0票数 0

我正在试着为我的网站设置一个小的搜索引擎。我想为每个搜索结果添加一个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或者？

php

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2009-08-07 14:16:32

首先，对于空的数据集，我会返回[]而不是["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();
  }
}

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

票数 1

Stack Overflow用户

发布于 2009-08-07 14:13:54

如果你只追加一次结果，而不是在每次迭代中追加部分结果，那么你可以加速你的代码：

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是最慢的操作之一。

另外，如果你计划只使用一次选择器返回的数据，那么不需要将其赋值给变量，但老实说，这不会节省你很多时间。

票数 1

Stack Overflow用户

发布于 2009-08-09 16:50:13

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1244889

复制

相似问题

问使用Jquery添加搜索结果
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery添加搜索结果EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery添加搜索结果
EN