1

I'm filtering images based on data attributes, and for each filter data attribute there can be several tag values. To match an element based on one data attribute value, you can do this:

$('.image-container').filter('[data-places="Canada"]').css('display','none');

But when I try this with a space delimited list, it doesn't work:

<div class="image-container" data-places="Nunavut Canada">...</div>

Is there any way in jquery to select by a value in a set in a data attribute?

The other option I can think of is to loop through an array of selected elements, but I've got images loading in via ajax in an infinite scroll so this array would be very bulky at some point. I'm open to non-jquery solutions as well.

Katharine Osborne
  • 6,571
  • 6
  • 32
  • 61
  • https://api.jquery.com/attribute-contains-selector/ – Andy Apr 01 '16 at 18:10
  • You'd have better to set a data attribute for the country, and other one for the region/state – A. Wolff Apr 01 '16 at 18:13
  • Actually there can be any level of place name, I don't know ahead of time as it is all dynamic. It does actually make sense the way I've set it up. – Katharine Osborne Apr 01 '16 at 18:16
  • Don't do it, don't use data attribute at the moment. Since html5 is still not standarized this isn't cross browser. If you really want to though use the jquery metadata plugin, don't use the solution provided below, will give you only problems. Edit. Oh, you went for it already, you gonna learn the hard way then ;) –  Apr 01 '16 at 18:23
  • What browsers/version is it an issue for? Do you have a link to documentation? – Katharine Osborne Apr 01 '16 at 18:24
  • Just browse the so around, that topic was moved many times, you will find stuff like this: http://stackoverflow.com/a/4909548 –  Apr 01 '16 at 18:25
  • 1
    @vove http://caniuse.com/#feat=dataset Which browsers are you referring, IE6/7 or what? And your posted link is 5yo (edit: i see it is referring to invalid HTML attribute but now all browsers support data-* one) – A. Wolff Apr 01 '16 at 18:25
  • @A. Wolff Do what you want, what do I care? Just wanted to point out it's not a good solution and if she wants to do it anyways it is better to use jquery plugin designed for that purpose instead of some shady techniques. What is your problem with that? –  Apr 01 '16 at 18:34
  • I've never run into any issues with data attributes before, and on this project I don't need to support anything prior to IE9 (the caniuse link omits mention of IE10, which is worrying). I'm not building an open source library other people have to use for every sort of unknown application. @vove how is Rajaprabhu's answer "shady"? – Katharine Osborne Apr 04 '16 at 09:33

1 Answers1

5

You have to use attribute contains a word selector at this context,

$('.image-container').filter('[data-places~="Canada"]').css('display','none');

Attribute equals selector cannot be used here since you are searching for a particular word in the attribute. Also you can use attribute contains selector, but that would select element with attribute like data-places="NunavutCanada"> also.

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • 1
    what's the diff between that and `$('.image-container [data-places~="Canada"]')` ? – dandavis Apr 01 '16 at 18:21
  • 1
    @dandavis That selects the element with attribute equals to a particular value, But not a word. At the same time, `~= ` selects the element when it has attribute value separated by space, and any one of the value separated by space got matched. Read here to know more about it. http://api.jquery.com/attribute-equals-selector/ – Rajaprabhu Aravindasamy Apr 01 '16 at 18:26
  • Just for anyone running across this with a similar problem, ':not([data-places~="Canada"])' selects the inverse. – Katharine Osborne Apr 04 '16 at 10:00
  • 1
    @KatharineOsborne Oh good to know that you are sharing the knowledge that you earned. – Rajaprabhu Aravindasamy Apr 04 '16 at 10:02