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 Fast Live Filter が単一レベルで機能し、プロジェクトが複数レベルのネストを使用しているためです。自分で巻く必要があります。それほど難しいことではありません: https://github.com/awbush/jquery-fastLiveFilter/blob/master/jquery.fastLiveFilter.js

必要なことは、必要に応じて input.change の関数を変更することだけです。

于 2013-03-20T02:41:03.947 に答える
0

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/

于 2013-03-20T11:01:55.763 に答える