선택한 배열 구성원을 대상으로

Question

동일한 클래스의 div가 있습니다. 제목 일부는 일련의 속성 - 몇 가지 않고 :

<div class="component_wrapper cw1" title="thisTitle1">... </div> 
<div class="component_wrapper cw2" title="thisTitle2">... </div> 
<div class="component_wrapper cw3" title="thisTitle3">... </div> 
<div class="component_wrapper cw4" title="">... </div> 
<div class="component_wrapper cw5" title="">... </div> 

나는이 div의를 통해 루프 및에 "인라인"자신의 CSS를 표시 속성을 설정하여 설정 title 속성을 가진 사람을 표시하는 자바 스크립트 함수를 구축했습니다

function checkComponent(e){ 
    var hdrSet = document.getElementsByClassName("component_wrapper"); 
    var titles = {}; 

    for (var i=0; i<hdrSet.length; i++){ 
     if (!titles[ hdrSet[i].title ]) { 
      titles[ hdrSet[i].title ] = true; 
      hdrSet[i].style.display = "inline"; 
     } 
    } 
} 
checkComponent(); 

문제는 페이지를로드 할 때 표시 대상 (좋음)을 목표로하고있는 div뿐 아니라 div가 타겟이 아닌 표시이기도합니다. 위의 예제에서 첫 번째 네 div가 표시됩니다. 원하는 모든 첫 번째 세 개의 div가 표시됩니다. 내 코드가 뭐가 잘못되었는데 ... 함수를 구성하는 더 좋은 방법이 있을까요?

Answer 1

코드에서 중복 된 제목이 없는지 확인합니다. 여기에 당신이 그 문제를 해결 할 수 방법은 다음과 같습니다

function checkComponent(){ 
    var hdrSet = document.getElementsByClassName("component_wrapper"); 

    for (var i = 0; i < hdrSet.length; i++){ 
     if(hdrSet[i].title) { 
      hdrSet[i].style.display = "inline"; 
     } 
    } 
} 
checkComponent(); 

을 또한, 당신이 jQuery를 사용하여 열려 있다면, 훨씬 깔끔한 더 호환 :

function checkComponent() { 
    $('.component_wrapper[title]:not([title=""])').css('display', 'inline'); 
} 
checkComponent();