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 attributes. Let's say I need to show elements with the word AAA and type BBB and number 2. All elements that have these attributes must be shown, and others must be hidden using the hide and show methods. Help?

Answer 1

You can select elements using the equal attribute:

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

Hide everything first, then filter and show the necessary ones. Check out 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 can only do this based on selectors. For more friendly code, use the filter function and read the data using the jquery data function. Start with hidden elements 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(); 

Script example

Answer 3

^{Since I cannot delete my answer and cannot use the attribute or filter select function, I have to come up with method number 3, just for fun:}

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

Answer 4

try

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

to get the desired value and put on the logic