Filter divs by data-attr containing string

Question

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 the data-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.

score 9 · Answer 1 · edited Apr 01 '19 at 16:22

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

Thanks 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](https://stackoverflow.com/a/37511463/1287812) — brasofilo, Jul 01 '18 at 20:51

score 8 · Answer 2 · answered Sep 23 '13 at 05:05

8

To find the elements whose data-size attribute contain the string "small" you simply do this:

$(".size[data-size*='small']");

answered Sep 23 '13 at 05:05

Jamal Khan

471
2
5

score 6 · Answer 3 · answered Sep 23 '13 at 04:43

6

Try

function filter(e) {
    var regex = new RegExp('\\b' + e + '\\b');
    $('.size').hide()
        .filter(function () {
        return regex.test($(this).data('size'))
    }).show();
}

Demo: Fiddle

answered Sep 23 '13 at 04:43

Arun P Johny

384,651
66
527
531

score 4 · Answer 4 · answered Sep 23 '13 at 04:51

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

answered Sep 23 '13 at 04:51

Tim Wax

113
5

Wow 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. – user2541153 Sep 23 '13 at 05:14
2

Be 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. – PSL Sep 23 '13 at 05:17

Filter divs by data-attr containing string

4 Answers4

Linked

Related