CODEWITHSUNDEEP
javascriptjquerywildcardshowcustom-data-attribute
Kevin Nugent
Kevin Nugent

Reputation: 277

Select Elements that have Data Attribute Equal to Anything

I'm using jQuery to show and hide elements and need to pass a data attribute value that will 'show all' i.e.: [data-country*="anything"] or with data attribute of 'country' with equals any value.

I have two lists of filters (country and type) which when clicked add the filter value to an array. Then both arrays are joined to .show() all the items which have a data attr containing that value: 

$("section.collaborator[data-country*='" + countryTog.join("'][data-country*='") + "'][data-collaborator_type*='" + collaborator_typeTog.join("'][data-collaborator_type*='") + "']").show('fast');

Is there a value which I can add to my array which will act as a wildcard as speculated above?

For example: If I hit 'Ireland' on the country filter menu and 'artist' on the type filter menu my selector looks like: 

$(".collaborator[data-country*='ireland'][data-collaborator_type*='partner']").show();

or if I add another country into the mix it would look like: 

$("section.collaborator[data-country*='ireland'][data-country*='united-kingdom'][data-collaborator_type*='partner']").show();

Now if I mouse up a bit and hit the 'all' button on the country filter menu I currently get: 

$("section.collaborator[data-country*='*'][data-collaborator_type*='artist']").show();

What I'd like to happen then is for all the items with attribute of data-country'[anything]' and data-type='artist' to show.

I know it's possible to query for the existence of the data attribute but in this case I need to pass a value.

Upvotes: 0

Views: 1801

Answers (1)

chiliNUT
chiliNUT

Reputation: 19582

If you want to select all elements that have a certain data attribute but you don't care what the value is, just use [data-attribute] without an equals sign. So if you want any country, but only artists, use $('[data-country][data-type="artist"]')

Upvotes: 3

Related Questions