Question

我有简单的场景：

<div someAttr='1'></div>
<div someAttr='2'></div>
<div someAttr='3'></div>
<div someAttr='4'></div>
...

如何

1）隐藏someAttr不是1的元素？

2）恢复以前的行动？显示someAttr属性

的所有元素

Answer 1

隐藏它们：

var not = '1';
$("[someAttr]:not([someAttr='" + not + "'])").hide();

// or, if you prefer a less-generic function:
$("[someAttr]:not([someAttr='1'])").hide();

然后，再次显示所有这些，你只需：

$("[someAttr]").show();

// or, to show only the one hidden before (because you could be hiding
//     the others for some other reasons...
$("[someAttr='1']").show();

//again, using the more generic solution:
$("[someAttr='" + not + "'])").show();

这应该做你想做的事。

作为一些额外的信息，我不推荐使用自定义属性（其他人也会同意）。旧的浏览器只是剥离它们，所以这可能不起作用...
所以，我要做的是将其设置为数据属性，所以data-someAttr。（代码中的所有内容都是相同的，只需在每个data-之前添加someAttr）

这对你有帮助吗？

Answer 2

隐藏，

$('div[someAttr!="1"]').hide();

显示，

$('div[someAttr]').show();

小提琴：DEMO

Answer 3

你可以简单地使用jQuery的toggle()方法（隐藏/显示）并指定你的选择器：

// hide/show all but 1
$('div[someAttr!="1"]').toggle();

// hide/show 1
$('div[someAttr="1"]').toggle();

jQuery docs：http://api.jquery.com/toggle/

jQuery显示/隐藏具有特定属性的元素

3 个答案: