jQuery를 사용하여 데이터 유형 내의 특정 문자열을 찾는 방법은 무엇입니까?

Question

포트폴리오를 동적으로 정렬합니다. http://shoeshinedesign.com/css/portfolio/

첫 번째로 나열된 프로젝트에는 "todd-ao"및 "soundelux"카테고리가 있습니다. 위로 필터 버튼은 필터 버튼의 li 클래스와 특정 프로젝트의 data-type을 연결하여 jQuery를 통해 프로젝트를 정렬합니다.

필터 버튼이 하나의 클래스로 표시되기 때문에 data-type 매개 변수에 두 개의 카테고리가있을 때마다 jQuery 스크립트는 data-type의 각 특정 단어를 인식하지 못합니다.

data-type에있는 여러 단어를 허용하도록 jQuery를 수정하고 그에 따라 버튼을 정렬해야합니다.

<!-- FILTER BUTTONS --> 
<ul class="portfoliofilter"> 
    <li class="all"> 
    <a href="#">All</a> 
    </li> 
    <li class="todd-ao"> 
    <a href="#">Todd-AO</a> 
    </li> 
    <li class="soundelux"> 
    <a href="#">Soundelux</a> 
    </li> 
</ul> 

<!-- PROJECT LISTING --> 

<ul id="portfoliolist3column"> 
    <li class="portfolio" data-type="todd-ao soundelux"> 
    <!-- 
     THIS PROJECT WON'T SORT DUE TO DATA-TYPE 
     NOT SPECIFICALLY MATCHING FILTER LI CLASS 
    --> 
    </li> 
    <li class="portfolio" data-type="todd-ao"> 
    <!-- SORTS --> 
    </li> 
    <li class="portfolio" data-type="soundelux"> 
    <!-- SORTS --> 
    </li> 
</ul> 

jQuery를 마크 업 : (조건의 else에 초점)

jQuery('.portfoliofilter li').click(function(e) { 
    jQuery(".portfoliofilter li a").addClass("portfoliobutton_noselect"); 
    jQuery(".portfoliofilter li a").removeClass("portfoliobutton"); 
    jQuery(this).children('a').removeClass("portfoliobutton_noselect"); 
    jQuery(this).children('a').addClass("portfoliobutton"); 

    var filterClass = jQuery(this).attr('class'); 

    if (filterClass == 'all') { 
    var $filteredData = $data.find('.portfolio'); 
    } else { 
    var $filteredData = $data.find('.portfolio[data-type=' + filterClass + ']'); 
    } 

    jQuery($list).quicksand($filteredData, { 
    duration: 500, 
    easing: 'swing', 
    adjustHeight: 'dynamic', 
    enhancement: function() { } 
    }, function() { 
    addPrettyPhoto(); 
    }); 

    return false; 
}); 

가 $data.find 단순히 찾아 보게하는 방법이 있나요

여기 내 HTML 마크가 달려 있습니다 문자열이 아니고 filterClass과 정확히 일치하지 않습니까?

EDIT 여기 아래 @pimvdb 의해 제공된 바와 같이, 최종의 문맥 코드이다.

jQuery('.portfoliofilter li').click(function(e) { 

      jQuery(".portfoliofilter li a").addClass("portfoliobutton_noselect"); 
      jQuery(".portfoliofilter li a").removeClass("portfoliobutton"); 
      jQuery(this).children('a').removeClass("portfoliobutton_noselect"); 
      jQuery(this).children('a').addClass("portfoliobutton"); 

      var filterClass = jQuery(this).attr('class'); 

      if (filterClass == 'all') { 
       var $filteredData = $data.find('.portfolio'); 
      } else { 
       var $filteredData = $data.find(".portfolio").filter(function() { 
        return ~jQuery(this).data("type").split(" ").indexOf(filterClass); 
        }); 
      } 

      jQuery($list).quicksand($filteredData, { 
       duration: 500, 
       easing: 'swing', 
       adjustHeight: 'dynamic', 
       enhancement: function() { 

       } 
      }, function(){ 
       addPrettyPhoto(); 
      }); 

      return false; 
     }); 

Answer 1

당신은 .find에 함수를 전달하고 data- 항목을 분할 수 : http://jsfiddle.net/mXbGJ/합니다. 이 아이디어, 아닌 경우에 대한 정확한 구현의 예이지만, 내가 생각 코드로 접착제 쉽게 :

$("...").find(function() { 
    return ~$(this).data("items").split(" ").indexOf("b"); 
}).css("background-color", "red"); 

---

편집 : 이것이 내가 생각하는 올바른 사람을 기록 :

jQuery('.portfoliofilter li').click(function() { 
    var x = jQuery(this).attr("class"); 
    console.log($("#portfoliolist3column").find(".portfolio").filter(function() { 
    return ~jQuery(this).data("type").split(" ").indexOf(x); 
    })); 
});