jquery show and hide based on html5 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?

Answer 1

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>