如何使我的 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();
我得到下面的 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
.
$("[make=gm]:not(:not([model!=bolt]))").show();