JQuery如何检查集合中的元素是否具有多个类名

Question

更新： Jared 的答案是解决方案 - 这是我的代码，如果确实存在匹配集，我只是添加了 else 语句来执行列表项的隐藏/显示。

$(document).ready(function() {
$("form#filterForm").submit(function () {
    var type = $("select#typeList option:selected").val();
    var style = $("select#styleList option:selected").val();
    var items = $(".container .content ul li").filter('.' + type + '.' + style);

    if (!items.length) {
        alert('no items...');
        return false;
    } else {

   $(".container .content ul li").hide();
 $(".container .content ul li"+type+style).show();
 mCustomScrollbars();
 return false;
    }

});
}); 

结束更新。 我有一些代码可以工作，但我无法将其带到最后一步。我有一个无序列表中的缩略图列表。

<div class="content">
            <ul>
            <li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images category-residential category-contemporary"><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res3-3-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-residential category-contemporary" ><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li>
            </ul>
        </div>

每个列表项都有多个类别。我有一个带有 2 个选择字段的表单，我正在使用 jQuery 获取选择字段的值，这些字段对应于列表项中的类名 - 这些被设置为变量并用于相应地显示和隐藏列表项.

 <form id="filterForm" action="">
<select id="typeList" name="typeList">
<option value=".portfolio_images">All</option>
<option value=".category-commercial">category-commercial</option>
<option value=".category-residential">category-residential</option>
</select>

<select id="styleList" name="typeList">
<option value=".type-portfolio_images">All</option>
<option value=".category-traditional">category-traditional</option>
<option value=".category-contemporary">category-contemporary</option>
</select>
<input id="submit_btn" type="submit" value="submit" label="submit" />   </form>  

<script>
$(document).ready(function() {
$("form#filterForm").submit(function () {
var $selectTypeClass=$("select#typeList option:selected").val();
var $selectStyleClass=$("select#styleList option:selected").val();
$(".container .content ul li").not($selectTypeClass+$selectStyleClass).hide();
$(".container .content ul li"+$selectTypeClass+$selectStyleClass).show();
mCustomScrollbars();
return false;
});
});
 </script>  

这真的很好用。但是，在某些情况下，一个项目将具有一个类别，而不是另一个类别：例如，它可能具有“类别-传统”而不是“类别-住宅”。所以我要做的是测试或检查是否有没有与两个选定的类匹配的项目，以显示警报消息（“没有一个项目与两个选择匹配，等等”）。否则，如果有任何两者都匹配，请继续正常执行该功能。

我遇到了很多麻烦，因为我尝试使用 each() 进行测试，但这不起作用，因为它会循环遍历列表并始终返回警报 - 因为它基本上在第一个停止

列表中不匹配然后跳出循环。

那么我将如何设置它以检查是否没有项目匹配两个选定的类？我是否必须以某种方式索引整个集合并将其作为一个整体进行检查，而不是使用 each() 发生的迭代？在这里难住 - 任何帮助，我提前谢谢你。

Answer 1

您可以在 CSS（和 Sizzle）选择器中使用多个类，例如 .class1.class2。只需搜索两个类的元素并测试长度：

$(document).ready(function() {
   $("form#filterForm").submit(function () {
        var type = $("select#typeList option:selected").val();
        var style = $("select#styleList option:selected").val();
        var items = $(".container .content ul li").filter('.' + type + '.' + style);

        if (!items.length) {
            alert('no items...');
        }
    });
}); 

Answer 2

你研究过 hasClass JQUERY 函数吗？

http://api.jquery.com/hasClass/

听起来这就是您要寻找的东西...如果不让我知道，我会尽力提供进一步的帮助。

Answer 3

您可以使用$.filter(function(index)) 函数对具有多个类的元素进行计数，然后将计数与完整的项目列表进行比较。

具有多个类的元素

var filtered = $('#foo li').filter(function() {
    return this.className.trim().indexOf(' ') > 0;
}); 

http://jsfiddle.net/t4HfL/

因为这只是检查每个元素的 className 属性中是否有空格，请注意使用trim() 以确保我们不会返回带有额外空格的元素，即class="foo "。