0

假设我有一个电视指南的结构：

<div class="day">
    <p>A Date</p>
    <div class="time">
        <p>A Time</p>
        <div class="show">
            <p>A Show</p>
            <div class="info1">
                <p>Info 1</p>
            </div>
            <div class="info2">
                <p>Info 2</p>
            </div>
            <div class="info3">
                <p>Info 3</p>
            </div>
            <div class="info4">
                <p>Info 4</p>
            </div>
        </div>
    </div>
</div>

我正在阅读的 XML 总共有 2135 个节目、750 次和 146 天。搜索节目名称的最佳方法是什么？我希望隐藏所有与输入字符串不匹配的节目；如果 div.time 不包含可见节目（即，在特定 div.time 下没有 div.show 与输入字符串匹配，则该容器也应隐藏；如果 div.day 不包含来自输​​入搜索的结果，则该父级也是隐藏的。

首先让我说我知道如何通过 JS/jQuery 提供这个功能。但是，我可能不知道这样做的最佳方式。我一直在摆弄，当我开始隐藏不包含匹配（可见）显示容器的时间容器时，浏览器中的事情开始变得缓慢/明显滞后。

我还想提一下，这种特殊的结构并不限于我上面写的。如果有更好/更有效的方式来构建指南，那么请务必通知我。

还有一个更普遍的问题是：什么时候开始让服务器处理一些过滤是个好主意？如果 2000 多个节点在客户端太多无法处理，我是否应该询问用户他们希望通过某种输入查看的天数范围，然后只将这些天数返回给客户端？

编辑：

search: function(selector, string) {
    string = $.trim(string);
    $(selector).each(function() {
        if ( $(this).children("p").text().search(new RegExp(string, "i")) < 0 ) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
    ctv.hideempty(".time");
},
hideempty: function(selector) {
    $(selector).each(function () {
        if ( $(this).children("div").is(":hidden") ) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
}

是我现在用来过滤的。然而，这正是我一直在玩的东西，可能肯定会有错误。

4

1 回答 1

1

2000 多个项目可能是相当多的记录要保存在客户端的内存中，但如果这些信息字段一直很小，它可能是可以管理的。但这可能是次要问题，您已经认识到该问题的解决方案。

您现在可能面临的更大问题是，听起来您正在showDOM 中创建 2135 个 DIV，以及它们的所有子项，然后尝试动态显示和隐藏它们。这绝对会挑战浏览器并使事情变得缓慢和滞后。

尝试只创建适量的showDIV，然后根据您的搜索和过滤结果替换这些 DIV 的内容。您可以为此使用 ejs 之类的模板系统，也可以自己动手。对于大型结果集，只显示前 N 个节目，并在用户执行某些操作时加载其他节目（即通过滚动列表，或点击“显示更多结果”按钮）。

于 2013-07-25T22:09:12.670 回答