Question

我有一个目标项目列表，以及具有项目，功能和里程碑关联的源项目。 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个左右的这些源项目，目标项目的扩展和崩溃感觉有点反应迟钝（缓慢）。是否有任何修复我可以应用于我现有的jQuery（在JSFiddle中），这将有助于吗？

Answer 1

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

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

Answer 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/

搜索大量元素列表

2 个答案: