1

我有一个目标项目列表，以及具有项目、功能和里程碑关联的源项目。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 中），这将有助于解决这个问题？

4

2 回答 2

1

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

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

于 2013-03-20T02:41:03.947 回答
0

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

你可以试试这个，例如：

$('.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/

于 2013-03-20T11:01:55.763 回答