javascript - Hide or show all divs for a certain value of a data attribute - Stack Overflow

admin管理员组

文章数量:1325236

I'm trying to use HTML5 valid markup here, so instead of adding to values to class I want to use the data-*="" to show/hide certain divs.

<div class="randomclass" data-chattingto="cheesecake"></div>
<div class="randomclass" data-chattingto="milkshake"></div>
<div class="randomclass" data-chattingto="cheesecake"></div>
<div class="randomclass" data-chattingto="milkshake"></div>

I can get the value of data-chattingto like so:

$("div").data("chattingto");

and I can hide/show a div with a certain class like so:

$(".randomclass").hide();

But how do I hide all divs with the data-chattingto value of cheesecake?

Thank you very much.

I'm trying to use HTML5 valid markup here, so instead of adding to values to class I want to use the data-*="" to show/hide certain divs.

<div class="randomclass" data-chattingto="cheesecake"></div>
<div class="randomclass" data-chattingto="milkshake"></div>
<div class="randomclass" data-chattingto="cheesecake"></div>
<div class="randomclass" data-chattingto="milkshake"></div>

I can get the value of data-chattingto like so:

$("div").data("chattingto");

and I can hide/show a div with a certain class like so:

$(".randomclass").hide();

But how do I hide all divs with the data-chattingto value of cheesecake?

Thank you very much.

• javascript
• jquery
• css
• html

Share Improve this question Follow asked Aug 10, 2012 at 21:04 Seb123Seb123 49111 gold badge77 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Simply use attribute-equals notation:

$('div[data-chattingto="cheesecake"]').hide();

And a JS Fiddle demo, kindly provided by CrunchyV. References:

• [attribute="value"] selector.

That would be:

$('div[data-chattingto = "cheesecake"]').show();

And

$('div[data-chattingto = "cheesecake"]').hide();

本文标签： javascriptHide or show all divs for a certain value of a data attributeStack Overflow