jQueryの：目に見える要素を数える - 効率/スピードの問題を

Question

私は正常に動作しますいくつかのコードを持っていますが、それはあまりにも遅くなっています：

HTML：

私は約50 ulの要素が含まれていた容器を持っています。各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>を含むミニテーブルになりました。処理には2秒かかりましたが、以前は半分以下でした。

私は確信しています。liに追加要素を追加すると、DOM処理が遅くなるのはなぜですか？私は.childrenを使用しています。セレクタは1つのDOMレイヤだけを深く移動します。

私も試してみた：良い測定のための

   $('#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個の要素が多数表示されている場合、目に見える部分が非常に少ない場合よりもはるかに遅いことです。しかし、すぐに（つまり、テーブルが各行に置かれる前に）非常に速く作業していたときと比べて、今は行がなくなっています。

何かアドバイスは大歓迎、しかし、私は私が持っているよりも多くのコード:)

感謝を投稿依頼しないでください。

Answer 1

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

Answer 2

試してみてください。

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

が、私はRobGに同意し、you'rマークアップは、おそらく間違っています。