원시 텍스트가있는 태그로 내용 필터링

Question

필터/태그 시스템을 만들려고합니다. 이 answer은 잘 작동하지만 클래스를 사용하며 원시 텍스트는 사용하지 않습니다. jquery 정렬/필터링 대부분의 클래스를 사용하는 것 및 원시 텍스트를 사용하고 싶습니다.

내 html이 이렇게 설정되었습니다.

<div class="pin"> 
<img src="/thumbnail.jpg" > 
<span>10.08.12</span> 
<ul> 
<li>Red</li> 
<li>Green</li> 
<li>Blue</li> 
<li>Yellow</li> 
</ul> 
</div> 

태그는 .li 요소 내에서하지만 나는 그들 콘텐츠의 페이지를 필터링 할 연결되고 싶습니다. 가장 좋은 방법은 오직 .pin가있는 경우 기반으로 특정 목록 항목을 보여 뭐죠

<div class="pin"> 
<img src="/thumbnail.jpg" > 
<span>10.08.12</span> 
<ul> 
<li><a href="#">Red</a></li> 
<li><a href="#">Green</a></li> 
<li><a href="#">Blue</a></li> 
<li><a href="#">Yellow</a></li> 
</ul> 
</div> 

. 예를 들어 <li><a href="#">Red</a></li>을 클릭하면 모든 .pin div가 필터링되어 Red의 목록 항목이됩니다.

편집 :

내가 :contains() 선택에 더 많은 찾고 있어요. 적절한가요?

.each onclick 내부를 보시려면 .pin<.li>Red</li>.show parent div?

감사합니다.

Answer 1

이것은 당신이 그래서 "원시 텍스트"자체 테스트를하고있다, 단지 요소를 반복하는 jQuery를 사용하고 ... 무엇을 찾고 할 수 있습니다 ...

$(".pin a").click(function() { 
    var lookingFor = $(this).text(); 
    $('.pin').hide(); 
    $('.pin li a').each(function (idx) { 
     var $el = $(this); 
     if ($el.text() === lookingFor) { 
      $el.closest(".pin").show(); 
     } 
    }); 
}); 

편집 : jsFiddle에 따라,이 그냥 cursor:pointer; CSS를 사용할 수 있는지 내가 앵커 태그 불필요 포스터에 동의 (앵커 태그를 추가하지 않고 작동합니다.

$(".pin li").click(function() { 
    var lookingFor = $(this).text(); 
    $('.pin').hide() 
    $('.pin:contains(' + lookingFor + ')').show(); 
}); 

당신이 앵커 태그를 사용해야하는 경우, 다음 할 것 :

$(".pin a").click(function() { 
    var lookingFor = $(this).text(); 
    $('.pin').hide() 
    $('.pin:contains(' + lookingFor + ')').show(); 
}); 

... 하나가 빠를 것이다 정말 확실하지

(2 차 편집 : "lookingFor"변수에 대한 잘못된 텍스트를 사용했다 ...)

Answer 2

근무 예 :

http://jsfiddle.net/gVpqx/

그러나 클래스를 사용하는 것이 좋습니다. 신뢰할 수있는 방법입니다. a을 넣지 않았는데 목적이 없으므로 li에 cursor: pointer stile을 사용하면됩니다.

$(document).ready(function() 
      { 
      $("li").each(function(x){ 
       $(this).click(function() 
        { 
        var tagval = $(this).html(); 
        filterDivs(tagval); 
        });  
       }); 

      $("#showall").click(function(){$(".pin").show();});    
      }); 


function filterDivs(tag) 
     { 
     $(".pin").each(function(x) 
        { 
        var ch = $(this).children("ul").children(); 
        var tagfound = false; 
         console.log(ch.length); 
        for (c=0; c<ch.length; c++) 
         { 
         if ($(ch[c]).html() == tag) 
          { 
          tagfound = true; 
          break; 
          } 
         } 
        if (tagfound) 
         $(this).show(); 
        else 
         $(this).hide();        
        }); 
     }