CODEWITHSUNDEEP
jqueryattributesjquery-selectorscontains
CMartins
CMartins

Reputation: 3293

How can I select elements based in part of data- attribute?

Can I use contains: in a selector to select all elements with a data- attribute or is there any other way of selecting all these elements? For example all elements containing "NL" or "UK"

Upvotes: 3

Views: 138

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

You don't want to match UKR for example if using *, so you should use ~ to find an exact match in a whitespace-separated list of words

[attr~=value]

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Take a look at here (2 mins read)

Attribute selectors

REF: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[data-country~="UK"] {
  color: red;
}
<span data-country="USA UK CHN">USA UK CHN</span><br>
<span data-country="USA UK">USA UK</span><br>
<span data-country="UK USA">UK USA</span><br>
<span data-country="UK">UK</span><br>
<hr>
You dont want the following to be matching:<br>
<hr>
<span data-country="USA CHN">USA CHN</span><br>
<span data-country="USAUK">USAUK</span><br>
<span data-country="UKR">UKR</span>

Upvotes: 2

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

You can use like this too:

$('[data-country^="UK"]') {
  color: red;
});

Upvotes: 1

Related Questions