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

时间:2017-03-19 01:06:32

标签: jquery jquery-selectors

我在下面的Html中包含了一个查询选择器,如下所示:

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

似乎正在发生的事情是,它和价值在一起,因为结果是一切都显示出来。我怎样才能"和"这些值让我得到了#34; 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>

1 个答案:

答案 0 :(得分:1)

在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

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