jQuery的：計數可見的元素 - 效率/速度問題

我有一些代碼，工作正常，但它已經成爲太慢：jQuery的：計數可見的元素 - 效率/速度問題

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選擇器只能深入一個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元素時，它比很少可見時慢得多。然而，現在沒有更多的線條比它快速運行時（即在表格被放入每一行之前）。

任何意見極大的讚賞，但請不要請求我發佈更多的代碼比我:)

感謝。

來源

2012-07-10 Nick

你需要發佈一個相關標記的例子，從你所說的，它有問題。一個[UL]（http://www.w3.org/TR/html5/the-ul-element.html#the-元素）只能**具有LI子元素，H4是錯誤的，糾正，所以你沒有你認爲你的結構。此外，用於格式化LI的內容的表是不必要的，請使用CSS。哦，並且H4不能將LIs作爲子節點，它們必須具有UL或OL父級。 – RobG 2012-07-10 05:30:38

nowrap而不是table？另外，爲什麼不隱藏父母h4而不是以其他方式隱藏孩子？ – mplungjan 2012-07-10 05:31:04

好的，謝謝。我會檢查標記並回到這一個。 – Nick 2012-07-10 05:36:30

我懷疑確定一個元素是否可見是非常昂貴的。考慮添加和刪除一個類來隱藏或顯示元素。然後，您可以直接根據類選擇它們，這將主要由主機支持。getElementsByClassName或querySelectorAll方法。

來源

2012-07-10 05:37:41 RobG

這是我陷入混亂的基礎！我*我*隱藏和顯示各種類的東西，但現在我需要確定是否還有任何東西正在顯示:)另一件事是，它沒有那麼昂貴，直到我把表格放在一行。這是真正的難題。我可以刪除表格，它工作正常。 – Nick 2012-07-10 07:12:59

我已經勾選了答案，以表彰這裏和上面評論中的好建議，雖然沒有人真正回答過我提出的問題:)我已將表格解決並重新格式化了解決問題的標記精細。 – Nick 2012-07-10 10:12:45

嘗試：

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

但我RobG同意，找你的標記可能不正確。

來源

2012-07-10 05:33:50 adeneo

jQuery的：計數可見的元素 - 效率/速度問題

回答

相關問題