jQuery: đếm các yếu tố có thể nhìn thấy - hiệu quả/vấn đề tốc độ

Question

Tôi có một số mã mà hoạt động tốt nhưng nó trở nên quá chậm:

HTML:

Tôi có một container chứa khoảng 50 ul yếu tố. Mỗi thành phần ul có tiêu đề h4 theo sau là một loạt các phần tử li. Chức năng ẩn tiêu đề nếu không nhìn thấy các phần tử đường kẻ.

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

Nó được làm việc khá chấp nhận được cho đến khi tôi đã thay đổi bản chất của li yếu tố. Mỗi li giờ đây là một bảng nhỏ bao gồm <table><tr><td>icon</td><td>text</td></tr></table>. Bây giờ nó mất 2 giây để xử lý, trong khi nó đã làm việc trong chưa đầy nửa giây. (Bảng ở đó để dừng gói văn bản dưới biểu tượng.)

Tôi thú nhận tôi không thể hiểu tại sao việc thêm các phần tử bổ sung vào mỗi li sẽ làm chậm quá trình xử lý DOM rất nhiều vì tôi đã sử dụng .children bộ chọn để chỉ đi sâu một lớp DOM.

Tôi cũng đã thử:

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

và $('#container').children().children('h4') cho biện pháp tốt.

Điều đáng chú ý là khi có nhiều thành phần hiển thị, nó sẽ chậm hơn nhiều so với khi có thể nhìn thấy một vài phần tử. Tuy nhiên, không có nhiều dòng nào hơn khi nó hoạt động khá nhanh (tức là, trước khi bảng được đưa vào mỗi dòng).

Bất kỳ lời khuyên nào được đánh giá cao, nhưng vui lòng không yêu cầu tôi đăng nhiều mã hơn tôi có :)

Cảm ơn.

Answer 1

Tôi nghi ngờ rằng việc xác định xem một phần tử có hiển thị hay không là khá đắt. Thay vào đó, hãy cân nhắc việc thêm và xóa lớp để ẩn hoặc hiển thị phần tử. Sau đó, bạn có thể chọn chúng trực tiếp dựa trên lớp, chủ yếu sẽ được hỗ trợ bởi máy chủ getElementsByClassName hoặc querySelectorAll.

Answer 2

thử:

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

nhưng tôi đồng ý với RobG, đánh dấu you'r có lẽ là không chính xác.