spesific 속성을 가진 요소를 숨기기

Question

나는 수천 개의 이미지를 나열하는 스크립트를 별도의 div에 각각 가지고 있습니다. 이런 식으로 뭔가 :

<div class="imagecontainer"> 
    <img src="picturename.jpg"> 
</div> 

<div class="imagecontainer"> 
    <img src="picturename2.jpg"> 
</div> 

내가 찾고 있어요 어떻게, 어떻게 든 filesizes 및 치수로 된 div 태그를, 그래서 내가 그냥 클릭하여 이미지를 복제-된 div를 숨길 것이 쉬울 것이다. 아래의 내용을 참조하십시오.

<script> 
function hide(filesize, imageheight, imagewidth) { 
    HERE I NEED CODE TO HIDE ALL DIVS THAT HAS THE SPECIFIED FILESIZE, 
    IMAGEHEIGHT AND IMAGEWIDTH. 
} 
</script> 

<div class="imagecontainer" filesize="279603" imageheight="500" imagewidth="380" 
onclick="hide('279603', '500', '380')"> 
    <img src="picturename.jpg"> 
</div> 

<div class="imagecontainer" filesize="272655" imageheight="500" imagewidth="380" 
onclick="hide('272655', '500', '380')"> 
    <img src="picturename2.jpg"> 
</div> 

내가하려는 일을 이해할 수 있습니까? 나는이 기준에 따라 div를 찾는 데 "div"태그를 달 수있는 유효한 방법을 모릅니다. 어쩌면 다른 방법이 있을까요?

Answer 1

jQuery를 사용하면 매우 간단합니다. 그것은 똑바로 자바 스크립트에서 할 수 있지만 조금 더 노력합니다. 귀하의 기능이 될 것입니다 : 당신이 HTML을 준수하므로 데이터 파일 크기, 데이터 imageheight 및 데이터 IMAGEWIDTH :

<script> 
function hide(filesize, imageheight, imagewidth) { 
    $('.imagecontainer[filesize="' + filesize + '"]' + '[imageheight="' + imageheight+ '"]' + '[imagewidth="' + imagewidth+ '"]').hide(); 
} 
</script> 

여기 나는 당신의 특성을 권하고 싶습니다, 또한 working example

입니다.

Answer 2

각 요소에 대한 클래스 이름이 있으므로 해당 클래스로 모든 요소를 ​​가져올 수 있습니다. 가장 빠른 방법은 모든 요소에 대해 선형 검색을 수행하는 것입니다.

function hide(filesize, imageheight, imagewidth) { 
    filesize = (filesize).toString(); 
    imageheight = (imageheight).toString(); 
    imagewidth = (imagewidth).toString(); 

    var els = document.getElementsByClassName('imagecontainer'); 

    for(var i = 0; i < els.length; ++i) { 
    var el = els[i]; 
    var fsize = el.getAttribute('filesize'); 
    var iheight = el.getAttribute('imageheight'); 
    var iwidth = el.getAttribute('imagewidth'); 

    if(fsize === filesize && imageheight === iheight && iwidth === imagewidth) { 
     el.style.display='none'; 
     break; 
    }   
    } 
}