Filter divs by data-attr containing string
Solution 1
Arun P Johny's answer is perfect. I took his solution and tweak a little to make it more general.
You can use it to match part of the string, not just the whole word. Might come in handy in the future.
$("#filter").keyup(function(){
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.size').hide().filter(function () {
return regex.test($(this).data('size'))
}).show();
}
<input type='text' id='filter'>
<div class="size" data-size="small">small tee</div>
<div class="size" data-size="small medium">small medium tee</div>
<div class="size" data-size="small medium tee">small medium tee</div>
<div class="size" data-size="small">small tee</div>
<div class="size" data-size="medium large">medium large tee</div>
<div class="size" data-size="medium large">medium large tee</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or try this FIDDLE
Solution 2
To find the elements whose data-size attribute contain the string "small" you simply do this:
$(".size[data-size*='small']");
Solution 3
Try
function filter(e) {
var regex = new RegExp('\\b' + e + '\\b');
$('.size').hide()
.filter(function () {
return regex.test($(this).data('size'))
}).show();
}
Demo: Fiddle
Solution 4
Using this css filter element[attr*=partial]
will find any element that contains that partial in the attribute
function filter(e){
$('.size').hide()
.filter('[data-sizes*="'+ e +'"]')
.show(); // show the filtered elements
}
And its pure css selector, there are more checkout here
Related videos on Youtube
user2541153
Updated on August 12, 2022Comments
-
user2541153 over 1 year
How to filter a number of divs based on what they have in their custom
data
attribute using jQuery? The problem is that the attribute can have more than 1 values (which is treated as 1 string). So I need to work out if thedata-att
value contains a string.<a href="">small</a> <a href="">medium</a> <a href="">large</a> <div class="size" data-size="small">small tee</div> <div class="size" data-size="small medium">small tee</div> <div class="size" data-size="small medium">small tee</div> <div class="size" data-size="small">small tee</div> <div class="size" data-size="medium large">small tee</div> <div class="size" data-size="medium large">small tee</div>
So if small link is clicked it should show only the divs whose data-size value contains small, so 'small' and 'small medium'.
I've tried:
$("a").click(function(e) { var selectSize = $(this).text(); filter(selectSize) e.preventDefault(); }); function filter(e){ $('.tyre').hide() .filter('[data-sizes=""]:contains(' + e + ')') .show(); // show the filtered elements }
but no go.
-
user2541153 over 10 yearsWow thats great, nice and clean thanks. Would this be compatible with browsers that don't support the css3 selector? or is it ok because jquery is handling this.
-
PSL over 10 yearsBe careful with this. It is a wildcard selector, i.e it will do a like match, not an exact match. Ex: if you have a run "smallMedium medium" and looking for small it will match this as well.
-
iVela almost 7 yearsNice snippet. Zanks!
-
brasofilo almost 6 yearsThanks a bunch for this! Maybe bring the JSfiddle here as Stack Snippet? . . . . Some people using this Nesar solution may find this other snippet very useful for some languages to do basic filtering: Remove accents/diacritics in a string in JavaScript