如何匹配data属性值中包含指定子值的DOM元素？

这个问题我之前也碰到过，刚好可以帮到你！你当前的代码用了[data-the-vals="xxx"]这种精确匹配的选择器，它只会匹配完全等于目标值的属性，但你的data-the-vals是逗号分隔的多个值，所以自然找不到目标元素。下面给你两种可行的解决方案：

方法一：用jQuery的filter()方法（推荐） #

这种方法通过自定义判断逻辑，把属性值拆分成数组后检查是否包含目标值，逻辑清晰且不容易出错：

// 假设myElementVal是你要排除的子值，比如'Female_Young.Dev'
const targetElements = $('div.professions').filter(function() {
  // 获取当前元素的data-the-vals值，拆分成数组
  const valueList = $(this).data('the-vals').split(',');
  // 返回不包含目标值的元素（!取反）
  return !valueList.includes(myElementVal);
});

// 点击按钮时显示这些元素
$('your-button-selector').on('click', function() {
  targetElements.show();
});

如果你的项目用的是较老的jQuery版本，includes可能不兼容，可以换成indexOf判断：

return valueList.indexOf(myElementVal) === -1;

方法二：用CSS属性选择器组合 #

如果你更倾向于用纯选择器的方式，可以通过组合三种属性选择器来覆盖所有边界情况（目标值在开头、中间、结尾），再用:not排除这些包含目标值的元素：

const matchStart = `[data-the-vals^="${myElementVal},"]`; // 值在开头（后面带逗号）
const matchMiddle = `[data-the-vals*=",${myElementVal},"]`; // 值在中间（前后都带逗号）
const matchEnd = `[data-the-vals$=",${myElementVal}"]`; // 值在结尾（前面带逗号）

const selector = `div.professions:not(${matchStart}, ${matchMiddle}, ${matchEnd})`;
const targetElements = $(selector);

两种方法的对比 #

• filter()方法：更灵活，哪怕属性值的格式有小变化（比如多了空格），也可以在拆分时处理（比如split(/,\s*/)），容错性更高。
• CSS选择器方法：代码更简洁，但需要严格匹配逗号分隔的格式，且如果属性值包含CSS特殊字符（比如[、]），需要额外转义，不如filter省心。

内容的提问来源于stack exchange，提问作者Rebecca O'Riordan