使用 jQuery 按类过滤列表项答案

【问题标题】：Filter list items by class using jQuery使用 jQuery 按类过滤列表项
【发布时间】：2013-02-22 08:00:11
【问题描述】：

我正在修改现有网站的 A-Z 目录，它是使用 jQuery 过滤的列表。点击ALL会显示所有部门。每个部分 A-Z 都在自己的 div 中分组，并带有匹配的类，例如，所有以 A 开头的部门都有一个带有“A”类的 div。

点击 GILROY 时，我需要以相同的方式过滤掉列表中的另一组项目。我已将“gilroy”类添加到这些列表项中。

花了几个小时尝试使用过滤来破译类似的示例后，我意识到我只是不明白如何正确编码，而且这是一个时间敏感的项目。任何帮助或指出正确的方向将不胜感激。

我正在修改的现有代码如下，请参阅 css & html 的 jsfiddle 链接。

$(document).ready(function() {
    $('ul#letterlist a').click(function() {
        $(this).css('outline','none');
        $('ul#letterlist .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toUpperCase().replace(' ','-');

        if(filterVal == 'ALL') {
            $('div#departments div').addClass('column');
            $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
        } else {
            $('div#departments div.column').fadeIn('fast').removeClass('column');

            $('div#departments div div').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('fast').addClass('hidden');
                } else {
                    $(this).fadeIn('fast').removeClass('hidden');
                }
            });
        } 

        return false;
    });
});

jsfiddle

【问题讨论】：

此代码将永远无法用于您想要的子搜索，仅仅是因为 gilroy 的类在 list item 上，而且您甚至都不会过滤列表项...跨度>
如果你要在你的问题中链接一个 jsfiddle，它应该是一个 fork 什么的。您正在对其进行更改，例如，使我的原始答案无效。
感谢您的提示，上面已编辑链接。

标签： jquery css filtering

【解决方案1】：

为GILROY 添加另一个案例到您的if-then-else。在这种情况下，显示所有内容，就像ALL 的情况一样，但使用.not('.gilroy') 隐藏除.gilroy 类li 之外的所有元素。确保在每次更改时 show() 所有 li 元素重置过滤器：

$('div#departments li').show();
if(filterVal == 'GILROY') {
    $('div#departments div').addClass('column');
    $('div#departments li').not('.gilroy').hide();
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
} else if(filterVal == 'ALL') {
    $('div#departments div').addClass('column');
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden');
} else {
    ...
}

演示：http://jsfiddle.net/8u26c/

【讨论】：

谢谢！这很好用，但是我需要在该特定 div 内的列表项上隐藏任何没有类名“gilroy”的 h5。示例：<div class="B"><h5>B</h5> <ul> <li><a href="behavioral-medicine.html">Behavioral Medicine</a></li> <li><a href="business-strategy-finance.html">Business Strategy &amp; Finance</a></li> </ul> </div>
我感觉你可能需要那个。我在这里做了一个例子：jsfiddle.net/66eSB 我让脚本在加载时向每个组添加一个类nogilroy，而没有li.gilroy。（实际上将其添加到所有组中，然后将其从具有li.gilroy 的任何组中删除）然后我只是将.nogilroy 组隐藏为过滤器的一部分。还有许多其他方法可以做到这一点，包括重新排列你的 HTML。这是一种方式。
这里有一个稍微好一点的带有 cmets 的版本：jsfiddle.net/66eSB/1 当用户点击过快时，它会处理一些动画问题。
太棒了！通过查看您在我开始时所做的修改，我学到了更多，而不是我自己研究时所做的。非常感谢！

【解决方案2】：

这个应该与“Gilroy”以及您可能决定添加的任何其他类似过滤器一起使用。你可以有一个空的div 类GILROY 和一个空的ul（这似乎已经存在于你的jsfiddle 的早期版本中），然后在你的else 块中添加以下sn-p：

if (filterVal.length > 1) { //can hard-code this to check for "GILROY" instead, if you want
    var targetList = $('div.' + filterVal + ' ul');
    $('li.' + filterVal.toLowerCase()).each(function() {
        targetList.append($(this));
    });                
}

演示：http://jsfiddle.net/82Vmw/

【讨论】：