자바 스크립트에서 데이터 필터링

Question

다음과 같이 HTML 페이지에 요소 목록 (DIV)이 있습니다.

같은 페이지에 해시 태그 목록이 있습니다.

사용자가 해시 태그 (예 : #bacteria)를 클릭 할 때 해당 해시 태그가 포함 된 DIV 만 표시되어야합니다.

구현하기 가장 가볍고 쉬운 방법은 무엇입니까?

<div class='entry'> 
    <p>#antibiotics destroy #e-coli and that&#39;s not good!!!!</p> 
    <!-- Hashtags: #antibiotics #eColi --> 
    <!-- UID: 755a2a60-972e-11e3-a464-872f2fc4dea2 --> 
</div> 

<div class='entry'> 
    <p>#bacteria can be #friendly, such as #e-coli for example</p> 
    <!-- Hashtags: #bacteria #friendly #eColi --> 
    <!-- UID: 6cc66d00-972e-11e3-a464-872f2fc4dea2 --> 
</div> 

<div class='entry'> 
    <p>#antibiotics can fight #bacteria</p> 
    <!-- Hashtags: #antibiotics #bacteria --> 
    <!-- UID: b37992c0-9686-11e3-8b2c-c97ae6645b3b --> 
</div> 

저는 Angular가 이러한 종류의 물건에 대해 강력하다는 것을 알고 있지만, 저는 가볍고 쉬운 것을 사용하고 싶습니다. 아마 jQuery 나 뭔가로 할 수있는 것처럼 ...

FYI는 EJS 렌더링으로 Node.Js/Express.Js에서 실행됩니다.

감사합니다.

UPDATE

가정하자 지금 내가 확인 할 몇 가지 해시 태그가 있습니다. 마치 contains처럼 변수는 문자열이 아니라 배열이며이 배열의 모든 값을 포함하는 항목 만 표시하면됩니다. 코드를 어떻게 변경합니까? 그것을하려고하지만, 관리 할 수 ​​없습니다 ... 정말 고마워요! 테스트되지 않은

Answer 1

는 :contains jquery selector

$(document).ready(function(){ 
    $('.entry').hide(); 
    $('.links').on('click','a',function(e){ 
     var $ctx = $(e.target); 
     var contains = $ctx.text(); 
     $('.entry').hide(); 
     $('.entry:contains('+contains+')').show(); 
     return false; 
    });  
}); 

샘플 사용 http://jsfiddle.net/LA3tD/

편집을

당신이 할 수있는 쉼표 후 분할 또는 사용 데이터 일부 분리와 특성 텍스트를 사용하고 연결된 필터 선택을 위해 나중에 그것을 분할

$(document).ready(function(){ 
    $('.entry').hide(); 
    $('.links').on('click','a',function(e){ 
     var $ctx = $(e.target); 
     var contains = $ctx.text(); 
     $('.entry').hide(); 
     if(contains.indexOf(',')!=-1){ 
      var tags = contains.split(','); 
      var filt = ''; 
      $.each(tags,function(i,el){ 
       filt += ':contains('+el+')'; 
      }); 
      // :contains can be concatenated multiple times f.e.: ":contains(foo):contains(bar)" 
      $('.entry'+filt).show(); 
     }else{ 
      $('.entry:contains('+contains+')').show(); 
     }; 
     return false; 
    });  
}); 

업데이트 샘플 : http://jsfiddle.net/LA3tD/1/

Answer 2

:

$('.entry').each(function(item) { $(item).show($item.is('.' + hashtag)); }); 

당신은 물론, 클래스로 해시 태그를 추가해야합니다 :

<div class="entry antibiotics"> 

Answer 3

이상적으로, 당신은 div의 자신으로 해시 태그 데이터를 통합 할 것입니다. .. 아마도 data- * 속성과 함께 :

<div class='entry' data-hashtags='antibiotics bacteria'> 

그런 다음 jQuery를 통해 루프를 숨길 수 있습니다. 그가 일치하지 않습니다 :

는

var clickedHashtag = x //get the clicked on hashtag however you like 

$('.entry').each(function(){ 
    if($(this).data('hashtags').indexOf(clickedHashtag)>=0){ 
     $(this).hide() 
    } 
}) 

바이올린 : http://jsfiddle.net/Jz3gZ/