【问题标题】：JQuery: Filter listelements [closed]JQuery：过滤列表元素[关闭]
【发布时间】：2013-06-28 13:37:14
【问题描述】：

我有一个无序列表的元素，想要过滤掉（切换）所有具有“alt”类的元素，但不是那些具有第二类“links”的元素。

HTML：

Toggle: 
<a href="#" id="linkToggle">Links</a>
<a href="#" id="altToggle">ALT</a>

<ul id="errorList" class="nav nav-list" style="height: 190px; overflow: auto;">
    <li class="alt">Alt 1</li>
    <li class="alt">Alt 2</li>
    <li class="alt links">Alt / Links 1</li>
    <li class="alt links">Alt / Links 2</li>
    <li class="links">Links 1</li>
    <li class="links">Links 2</li>
</ul>

jQuery:

function toggleClass(cssClass) {
    $("."+cssClass).toggle();
    $("#"+cssClass+'Count').parent().toggleClass("muted");
}


$("#linkToggle").click(function() { 
    $(".links").toggle();  
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt").toggle();    
    $(this).toggleClass("muted");
})

我为你做了一个JSFiddle：http://jsfiddle.net/7MnXd/

你有 6 个元素：

2 有一个名为“链接”的类
另外 2 个有一个名为“alt”的类
并且有两个类的元素

我想要归档的内容：

点击“Link”时，只有“Link 1”和“Link 2”应该被过滤掉，因为“Alt / Links n”有两个类。仅当两个切换都被激活时，才应过滤掉这两个元素。我还尝试了 jQuery 提供的 [filter() function][2]，但无法解决问题。我想我必须检查它是否是唯一的类，如果不是它不会被过滤掉，但是如何检查另一个类是否已经切换？

有人可以指出我正确的方向吗？谢谢！

【问题讨论】：

对不起，我的第二个链接坏了。 api.jquery.com/filter
哪些类？？？ x & y？
x = alt, y = links 认为应该清楚，如果没有：请检查我的 jsfiddle

标签： javascript jquery html html-lists filtering

【解决方案1】：

如果它符合您的需求，请尝试：

DEMO

$("#linkToggle").click(function() { 
    $(".links").toggle();  //.not('.alt') ???
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt").not('.links').toggle();    
    $(this).toggleClass("muted");
})

【讨论】：

这非常适合我，谢谢！

【解决方案2】：

这应该可行：

function toggleClass(cssClass) {
    $("."+cssClass).toggle();
    $("#"+cssClass+'Count').parent().toggleClass("muted");
}


$("#linkToggle").click(function() { 
    $(".links:not(.alt)").toggle();  
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt:not(.links)").toggle();    
    $(this).toggleClass("muted");
})

【讨论】：

【解决方案3】：

这应该做你所追求的，这将检查一个类和一个类是否存在。

$("#linkToggle").click(function() { 
    $("li[class='links']").toggle();  
    $(this).toggleClass("muted");
});

$("#altToggle").click(function() { 
    $("li[class='alt']").toggle();    
    $(this).toggleClass("muted");
});

【讨论】：

【解决方案4】：

好的，经过一些测试，我得出了以下解决方案，该解决方案也可能适用于其他情况：

HTML

Toggle: 
<span class="nav-switches">
    <a href="javascript:toggleClass('links');" data-toggle="">Link (<span id="linksCount">0</span>)</a>
    <a href="javascript:toggleClass('alt');" data-toggle="">Text (<span id="altCount">0</span>)</a>
    <a href="javascript:toggleClass('csv');" data-toggle="">CSV (<span id="csvCount">0</span>)</a>
</span>

<ul id="errorList" class="nav nav-list" style="height: 190px; overflow: auto;">
    <li class="alt">Alt 1</li>
    <li class="alt">Alt 2</li>
    <li class="alt links">Alt / Links 1</li>
    <li class="alt links">Alt / Links 2</li>
    <li class="links">Links 1</li>
    <li class="links">Links 2</li>
    <li class="csv">CSV 1</li>
    <li class="csv">CSV 2</li>
    <li class="csv">CSV 3</li>
</ul>

JavaScript

window.toggleClass = function(cssClass) {
    // Wird bereits gefiltert und auf aktivierten Filter geklickt?
    if( $("#"+cssClass+'Count').parent().siblings().hasClass("muted") && !$("#"+cssClass+'Count').parent().hasClass("muted") ) {
        $("ul#errorList li").show();
        $("#"+cssClass+'Count').parent().siblings().removeClass("muted");
    } else {
        $("ul#errorList li").hide();
        $("ul#errorList").find("li."+cssClass).show();

        $("#"+cssClass+'Count').parent().siblings().addClass("muted");
        $("#"+cssClass+'Count').parent().removeClass("muted");
    }
}

View Demo on JSFiddle

我希望你和我一样喜欢这个解决方案！

【讨论】：