jQuery: görünür unsurları sayma - verimlilik/hız problemleri

Question

Ben çalışıyor bazı kod var ama çok yavaş haline geldi:

HTML:

yaklaşık 50 ul unsurları içeren bir kap var. Her ul öğesinin bir h4 başlığı ve ardından bir dizi li öğesi vardır. Hiçbir satır öğesi görünmüyorsa, işlev başlığı gizler.

JavaScript/jQuery: Ben li elementlerin doğası değişti dek

  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(); 
        } 
       }); 
      } 

Oldukça kabul edilebilir çalışıyordu. Her bir li, şimdi <table><tr><td>icon</td><td>text</td></tr></table> içeren bir mini tablodur. Şimdi işlem yapmak 2 saniye sürüyor, oysa daha önce yarım saniyeden daha kısa bir sürede çalıştı. (Tablo simgesinin altındaki metni sarmalamayı durdurur.)

İtiraf edeyim. li öğesinin her birine ek öğelerin eklenmesinin neden çok fazla işlenmemesi gerektiğini çok iyi anlayamıyorum çünkü .children seçici sadece bir DOM katmanı derinliğine gider.

Ben de denedim:

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

ve iyi ölçmek için $('#container').children().children('h4').

Ayrıca dikkat edilmesi gereken nokta, görünürde çok sayıda li öğesi bulunduğunda, çok az göründüğünden çok daha yavaştır. Bununla birlikte, daha hızlı bir şekilde çalıştığı zamandan daha fazla satır yoktur (yani, tablo her satıra yerleştirilmeden önce).

Herhangi bir tavsiye büyük takdir ama benden daha çok kod :)

Teşekkür sonrası talep etmeyiniz.

Answer 1

Bir öğenin görünür olup olmadığını belirleme oldukça pahalı olduğundan şüpheleniyorum. Bunun yerine, öğeleri gizlemek veya göstermek için bir sınıf ekleyip silmeyi düşünün. Daha sonra onları, genellikle bir ana makine getElementsByClassName veya querySelectorAll yöntemi tarafından desteklenen sınıfı temel alarak seçebilirsiniz.

Answer 2

deneyin:

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

ama RobG katılıyorum, you'r biçimlendirme muhtemelen yanlıştır.