:not 选择器如何工作答案

【问题标题】：how work the :not selector:not 选择器如何工作
【发布时间】：2016-02-03 14:55:46
【问题描述】：

我只想选择没有特定data-filter-group 的按钮。在这种情况下，data-filter-group 值不等于“流派”。

我怎样才能只选择这些按钮？

代码在没有:not() 选择器的情况下可以正常工作，所以我不明白它是如何工作的。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#filters:not([data-filter-group='genres']) button").css("background-color", "yellow");
});
</script>
</head>
<body>

<div id="filters">
    <div class="ui-group">
        <h3>Genere</h3>
        <div id="genres" class="button-group js-radio-button-group" data-filter-group="genres">
            <button class="button is-checked" data-filter="">All<span></span></button>
            <button class="button" data-filter=".Action">Action<span></span></button>
            <button class="button" data-filter=".Adventure">Adventure<span></span></button>
            <button class="button" data-filter=".Animation">Animation<span></span></button>
            <button class="button" data-filter=".Comedy">Comedy<span></span></button>
            <button class="button" data-filter=".Crime">Crime<span></span></button>
            <button class="button" data-filter=".Drama">Drama<span></span></button>
            <button class="button" data-filter=".Family">Family<span></span></button>
            <button class="button" data-filter=".Fantasy">Fantasy<span></span></button>
            <button class="button" data-filter=".Romance">Romance<span></span></button>
            <button class="button" data-filter=".ScienceFiction">Science Fiction<span></span></button>
            <button class="button" data-filter=".Thriller">Thriller<span></span></button>
        </div>
    </div>
    <br />
    <div class="ui-group">
        <h3>Registi</h3>
        <div id="directors" class="button-group js-radio-button-group" data-filter-group="directors">
            <button class="button is-checked" data-filter="">All<span></span></button>
        </div>
    </div>
    <div class="ui-group">
        <h3>Attori</h3>
        <div id="actors" class="button-group js-radio-button-group" data-filter-group="actors">
            <button class="button is-checked" data-filter="">All<span></span></button>
        </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

$("#filters :not([data-filter-group='genres']) > button")

标签： jquery jquery-selectors

【解决方案1】：

这可以通过两种方式实现

$("div[data-filter-group!='genres'] > button ").css("background-color", "yellow");

or

$(":not([data-filter-group='genres']) > button").css("background-color", "yellow");

https://jsfiddle.net/vxtochsu/

【讨论】：