jQuery를 : 눈에 보이는 요소 계산 - 효율성/속도 문제를

Question

내가 잘 작동 몇 가지 코드를 가지고 있지만 너무 느린되고있다 :

HTML :

나는 약 50 ul 요소를 포함하는 컨테이너를 가지고있다. 각 ul 요소는 h4 표제 다음에 일련의 li 요소가옵니다. 이 함수는 표시되는 선 요소가없는 경우 표제를 숨 깁니다.

자바 스크립트/jQuery를 : 나는 li 요소의 특성을 변경할 때까지

  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은 <table><tr><td>icon</td><td>text</td></tr></table>으로 구성된 미니 표가되었습니다. 이전에는 0.5 초도 채 걸리지 않았지만 이제는 처리하는 데 2 ​​초가 걸립니다. (이 테이블은 아이콘 아래에 텍스트 줄 바꿈을 멈추게합니다.) li에 추가 요소를 추가하면 DOM 처리 속도가 느려집니다. 이유는 .children을 사용했기 때문에 이해할 수 없습니다. selector는 하나의 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 마크 업 아마 잘못되었습니다.