如何使我的 jQuery 查询选择器执行 AND 而不是 OR

How to make my jQuery query selector perform AND and not OR

我得到下面的 Html,其中包含如下查询选择器:

$("[make=gm],[model!=bolt]").show();

似乎正在发生的事情是,它 "or" 将这些值放在一起,因为结果就是一切。我如何 "and" 值才能得到 "gm volt"。此外,任何对此的引用都会有所帮助,因为我正在努力更好地理解它。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            console.log("ready!");
            $("[make=gm],[model!=bolt]").show();
        });
    </script>
</head>
<body>
    <div make="gm" model="volt">gm volt</div>
    <div make="gm" model="bolt">gm bolt</div>
    <div make="ford" model="mustang">ford mustang</div>
    <div make="ford">ford</div>
    <div test></div>
</body>
</html>

在jQuery中使用.filter

jQuery 中更漂亮的实现方式:

$("[make=gm]").filter("[model!=bolt]").show();

您可以将 if 语句嵌套在 .filter() 选择器修饰符中。

只有 CSS 版本。

为此,您可以使用 :not 选择器,它会确保所有选定的都是 而不是 特定类型(为此,您也可以使用 jQuery的.not():

$("[make=gm]:not([model=bolt])").show();

完整代码请参考这个jsfiddle:

https://jsfiddle.net/nfnneil/9bbqLfdw/

CSS 中,您可以通过嵌套 :not.

来执行 and
$("[make=gm]:not(:not([model!=bolt]))").show();