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

2 Answers 2

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();