javascript - 如何使用 jQuery 查找数据类型中的特定字符串？

Question

我正在 http://shoeshinedesign.com/css/portfolio/ 动态排序投资组合

第一个列出的项目有两个类别:“todd-ao”和“soundelux”。顶部的过滤按钮通过 jQuery 对项目进行排序，连接过滤按钮的 li 类和特定项目的 data-type。

由于过滤器按钮由一个类标记，因此每当我在 data-type 参数中有两个类别时，jQuery 脚本就无法识别 data-type< 中的每个特定单词。/.

我需要修改我的 jQuery，以允许在数据类型 中使用多个单词，并且按钮仍能进行相应排序。

这是我的 HTML 标记:

<!-- 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只查找字符串而不是与filterClass完全匹配？

编辑
这是最终的上下文代码，由下面的 @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);
  }));
});