5

正常に動作するコードがいくつかありますが、遅くなりすぎています。

HTML:

ul約 50の要素を含むコンテナーがあります。各ul要素にはh4見出しがあり、その後に一連のli要素が続きます。行要素が表示されていない場合、関数は見出しを非表示にします。

Javascript/jQuery:

            function show_or_hide_headings() {
                $('#container').children('ul').each(function (i) {
                    var $this = $(this),
                        $h4 = $this.children(':first');
                    if ($this.children('li:visible').length) {
                        $h4.show();
                    } else {
                        $h4.hide();
                    }
                }); 
            }

li要素の性質を変更するまでは、問題なく動作していました。それぞれliが で構成されるミニ テーブルになりました<table><tr><td>icon</td><td>text</td></tr></table>。以前は 0.5 秒未満で処理されていましたが、現在は処理に 2 秒かかります。(この表は、アイコンの下でテキストが折り返されるのを防ぐためにあります。)

セレクターをli使用して DOM レイヤーを 1 つだけ深くしたため、追加の要素をそれぞれに追加すると DOM 処理が非常に遅くなる理由がよくわかりません。.children

私も試しました：

                $('#container').find('h4').each(function (i) {
                    var $this = $(this);
                    if ($this.siblings('li:visible').length) {
                       $this.show();
                    } else {
                       $this.hide();
                    }
                });

そして$('#container').children().children('h4')十分な測定のために。

また注目に値するのは、多くのli要素が表示されている場合は、表示されている要素が少ない場合よりもはるかに遅くなることです。ただし、非常に迅速に機能したとき (つまり、テーブルが各行に配置される前) よりも多くの行はありません。

どんなアドバイスでも大歓迎ですが、私が持っているよりも多くのコードを投稿するように要求しないでください:)

ありがとう。

4

2 に答える 2

2

試す：

$('h4', '#container').css('display', 'none').filter(function() {
    return $(this).siblings('li:visible').length;
}).css('display', 'block');

しかし、私はRobGに同意します。あなたのマークアップはおそらく間違っています。

于 2012-07-10T05:33:50.543 に答える
2

要素が表示されているかどうかを判断するには、かなりのコストがかかると思います。代わりに、要素を表示または非表示にするクラスを追加および削除することを検討してください。次に、クラスに基づいてそれらを直接選択できます。これは、ホストのgetElementsByClassNameまたはquerySelectorAllメソッドによってほとんどサポートされます。

于 2012-07-10T05:37:41.417 に答える