javascript - each() 関数が遅くなる

Question

申し訳ありませんが、ブラケットが間違った場所にあることがわかりました。今はすべて順調です。助けてくれてありがとう。

特定のボタンをクリックすると起動するこの各関数があります。この機能は、たとえば最初の 10 回のクリックでは高速です。ただし、関数をトリガーする (ボタンをクリックする) たびに、関数はますます遅くなります。クリックごとに2倍の時間がかかるようです。誰かが理由を知っていますか、そしてもっと重要なことに、これを防ぐためにコードを変更する方法を教えてください。

ありがとう！

function CollarStyleFunction(){

$('#Collar-Style-Box').children(".Fabrics").children(".SwatchBox").children('img').each(function () {

    var titleIs = this.title;
    if (titleIs==option) {
        $(this).parent().css("display", "inline");
    }

});


///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

その他の情報とコード:

JS は XML ファイルを読み込み、10 個の生地見本を div (class="Fabrics") に読み込みます。

function parse(document){

    $(document).find("Swatch").each(function(){
        $(".Fabrics").append(
            '<div class="SwatchBox">'+
            '<img id="' + $(this).attr('name') + '" title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.png">'+
            '</div>'
        );
    });


} //function parse End

HTML:

<!-- Collar-Style -->

    <div id="Collar-Style" class="Name">Collar Style</div>

    <div id="Collar-Style-Box" class="Box">

        <div id="Collar-Style-Options-Box" class="Options">

            <div class="SwatchBox">
                <img id="Flat-Knit" src="img/options/Flat-Knit.png">
            </div><!-- SwatchBox -->

            <div class="SwatchBox">
                <img id="Self-Fabric" src="img/options/Self-Fabric.png">
            </div><!-- SwatchBox -->

            <div class="SwatchBox">
                <img id="Woven" src="img/options/Woven.png">
            </div><!-- SwatchBox -->

        </div><!-- Collar-Style-Options-Box -->

        <div id="Collar-Style-Fabrics-Box" class="Fabrics">
        </div><!-- Collar-Style-Fabrics-Box -->

    </div><!-- Collar-Style-Box --> 

<!-- Canvas -->

    <div id="Collar-Style-Canvas" class="Canvas"></div>