How to show and hide elements based on HTML data attributes

Question

HTML file:

<div class="test" data-word="AAA" data-type="T" data-number="1"> Text 1 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 2 </div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2"> Text 3 </div>
<div class="test" data-word="D" data-type="BBB" data-number="6"> Text 4 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 6 </div>
<div class="test" data-word="G" data-type="R" data-number="5"> Text 7 </div>
<div class="test" data-word="H" data-type="BBB" data-number="1"> Text 5 </div>
<div class="test" data-word="AAA" data-type="R" data-number="9"> Text 8 </div>

I need to hide and show elements based on the attributes. Say I need to show elements with word AAA and type BBB and number 2. All the elements that have these attributes must be shown and others should be hidden using hide and show methods. Help?

Salman Arshad · Accepted Answer · 2014-12-22 20:18:33Z

You can select the elements using the attribute equals selector:

$('.test').hide().filter('[data-word="AAA"][data-type="BBB"][data-number="2"]').show();

First hide all, then filter and show necessary. Check the demo below.

$('.test').hide().filter('[data-word="AAA"][data-type="BBB"][data-number="2"]').show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" data-word="AAA" data-type="T" data-number="1"> Text 1 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 2 </div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2"> Text 3 </div>
<div class="test" data-word="D" data-type="BBB" data-number="6"> Text 4 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 6 </div>
<div class="test" data-word="G" data-type="R" data-number="5"> Text 7 </div>
<div class="test" data-word="H" data-type="BBB" data-number="1"> Text 5 </div>
<div class="test" data-word="AAA" data-type="R" data-number="9"> Text 8 </div>

TylerH · Accepted Answer · 2023-03-06 17:27:13Z

3

You could do this just based on selectors. For a more code-friendly approach use a filter function and read the data using jQuery data function. Start with the elements hidden and show the filtered results.

$('div.test').hide().filter(function(){
    var d = $(this).data();
    return d.word == 'AAA' && d.type == 'BBB' && d.number === 2;
}).show();

JSFiddle Example

edited Mar 6, 2023 at 17:27

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Dec 22, 2014 at 20:00

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

2 Comments

Salman Arshad Over a year ago

Why use filter when you can use CSS selectors?

Josiah Ruddell Over a year ago

As i mentioned it's a more dynamic and code friendly approach. You can use types and equality operators. It's a readability preference.

JackInos · Accepted Answer · 2018-06-08 11:53:36Z

1

$('form')
    .children().data( { word: [ 'AAA','BBB' ], number: [2] } ).show();

answered Jun 8, 2018 at 11:53

JackInos

111 bronze badge

Comments

TylerH · Accepted Answer · 2023-03-06 17:27:55Z

$(function() {
  $(".test").each(function() {
    var d = $(this).data();
    $(this).toggle(d.word === "AAA" && d.type === "BBB" && d.number === 2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="test" data-word="AAA" data-type="T" data-number="1">Text 1</div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2">Text 2</div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2">Text 3</div>
<div class="test" data-word="D" data-type="BBB" data-number="6">Text 4</div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2">Text 6</div>
<div class="test" data-word="G" data-type="R" data-number="5">Text 7</div>
<div class="test" data-word="H" data-type="BBB" data-number="1">Text 5</div>
<div class="test" data-word="AAA" data-type="R" data-number="9">Text 8</div>

agentpx · Accepted Answer · 2014-12-22 20:03:38Z

0

try

$(".test").data("data-word")

to get the value you need and put on the logic

answered Dec 22, 2014 at 20:03

agentpx

1,0811 gold badge9 silver badges25 bronze badges

1 Comment

gunr2171 Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

How to show and hide elements based on HTML data attributes

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related