JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="mylist">
<li data-label="red" data-size="1">Item 1</li>
<li data-label="orange" data-size="3">Item 2</li>
<li data-label="red" data-size="2">Item 3</li>
<li data-label="yellow" data-size="2">Item 4</li>
<li data-label="red" data-size="1">Item 5</li>
</ul>
<br />
<a id="find" href="#">Find matching elements</a>
<br /><br />
<ul id="showresults"></ul>
CSS
ul,li {
list-style: none;
}
JavaScript
$(document).ready(function() {
$('#find').click(function() {
var results = $('#mylist').find(function() {
return
$(this).attr('data-label') == 'red' &&
$(this).attr('data-size') == 1;
});
$('#showresults').html(results);
return false;
});
});