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>

Answer 2

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

Fiddle Example

Answer 3

^{Since I cannot delete my answer and cannot use attribute selector or filter function, I must come up with method number 3, just for the fun of it:}

$(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>