搜索大量元素答案

【问题标题】：Searching through large list of elements搜索大量元素
【发布时间】：2013-03-20 01:20:07
【问题描述】：

我有一个目标项目列表，以及具有项目、功能和里程碑关联的源项目。 JSFiddle

由于我的列表非常大（总共大约 4000 个元素），我将属于目标项目的源项目设置为可折叠以压缩空间并提高可读性。

示例标记：

<div class='projectscontainer'>
    <div id="destarrow" class="arrow-right"></div>
    <span class="item destproject unselectable" title="ID: 426">Kzax-Xrj</span>
    <br>
    <div class="srcprojects" style="display: block; margin-left: 30px;">
        <span class="item srcproject" title="ID: 4760">Lokhxtea</span><br>
    </div>
    <div class="srcprojects" style="display: block; margin-left: 30px;">
        <span class="item srcproject" title="ID: 4760">Zbjamjh</span><br>
    </div>
    <div class="srcprojects" style="display: block; margin-left: 30px;">
        <span class="item srcproject" title="ID: 6034">Jeuzax-Xrjamjhxteaq</span>
        <div id='arrow' class='arrow-right'></div>
        <span class='item srcproject exception' title='Project'>Qiospq</span>
        <div id='arrow' class='arrow-right'></div>
        <span class='item srcproject exception' title='Feature'>Qiospq</span>
        <div id='arrow' class='arrow-right'></div>
        <span class='item srcproject exception' title='Milestone'>Muqewko</span><br>
    </div>
</div>

由于我把所有源项目都折叠了，很难找到具体的源项目。

如何在 jQuery 中创建一个简单的过滤器，它可以使用输入来定位某些目标/源项目？我尝试过类似jQuery Fast Live Filter 的方法，但它似乎不适用于我的标记。

另外，由于我有 4000 个左右的源项目，因此 Destination 项目的扩展和折叠感觉有点反应迟钝（缓慢）。是否有任何修复可以应用于我现有的 jQuery（在 JSFiddle 中）来帮助解决这个问题？

【问题讨论】：

遍历 4000 个元素并没有那么可怕。我会强烈考虑为项目使用对象而不是 DOM 元素并在那里执行所有逻辑。当您的表示和数据是一回事时，很快就会变得非常混乱。搜索排序列表是 O(logn) （例如，二进制搜索）。即使您的列表没有排序，它仍然只是 O(n)

标签： jquery performance search

【解决方案1】：

那是因为 jQuery 快速实时过滤器在单个级别上工作，而您的项目正在使用多个级别的嵌套。你必须自己动手。应该没那么难：https://github.com/awbush/jquery-fastLiveFilter/blob/master/jquery.fastLiveFilter.js

您所要做的就是根据您的要求修改 input.change 中的函数。

【讨论】：

【解决方案2】：

解决您的第二个问题，您可能会通过选择不同的元素来发现轻微的性能优势，但我认为任何改进都不会很好。

你可以试试这个，例如：

$('.projectscontainer').on("click", "span.destproject", function () {
    $(this).siblings('.srcprojects').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down");
}).on("click", "div.destarrow", function () {
    $(this).parent().find("span.destproject").trigger("click");
});

注意：destarrow 已从 ID 更改为类。

演示：http://jsfiddle.net/Q63Dx/8/

【讨论】：