我如何 select 元素基于部分数据属性？

Question

我可以在 select 中使用 contains: 或者 select 所有具有 data- 属性的元素，还是有任何其他方式 selecting 所有这些元素？ 例如所有包含 "NL" 或 "UK" 的元素

Answer 1

你不想匹配 UKR 例如，如果使用 *，那么你应该使用 ~ 在以空格分隔的单词列表中找到完全匹配

[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.

看看这里（阅读 2 分钟）

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>

Answer 2

你也可以这样使用：

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