jQuery中通过$(this)判断data-*属性匹配的实现及问题解析

错误写法失效的核心原因 #

首先明确jQuery .attr() 方法的定位：该方法仅用于读取/写入元素的原生属性值，参数必须是纯属性名称，完全不会解析参数里的CSS选择器语法、匹配规则。

• 写法$(this).attr('[data-target~="value5"]')失效原因：jQuery会把带方括号、带选择器操作符的整个字符串，当成要查找的属性名，去当前元素上匹配是否存在一个叫[data-target~="value5"]的自定义属性，这个属性在页面上根本不存在，方法会直接返回null，判断自然不生效。
• 简化写法$(this).attr('data-target~="value5"')失效原因同理：jQuery会把data-target~="value5"整体作为属性名查找，不会识别~=是CSS属性选择器的独立值匹配规则，最终依然因为找不到对应属性返回空值。

注：CSS属性选择器语法（比如~=、*=、^=）是给元素筛选方法（比如$()、.is()、.filter()）使用的，不能传入.attr()这类纯属性读写方法中。
另外你之前尝试的全局判断写法if ($('.class1[data-target~="value5"]'))存在逻辑脱钩问题：不管循环到哪个class1元素，这个判断拿到的都是全页面所有符合条件的元素集合，判断结果是固定值，和当前遍历到的单个元素没有绑定关系，自然不符合遍历流程的需求。

单元素遍历下的正确匹配实现 #

要在遍历流程中，对当前$(this)指代的单个元素，实现等价于[data-target~="value5"]的独立值匹配（不会出现子串误匹配），有两种成熟实现方案：

方案1：使用jQuery原生.is()方法（最简洁） #

.is()方法会针对当前jQuery对象包裹的单个元素，校验是否匹配传入的选择器，底层直接调用浏览器原生的element.matches()接口，匹配规则和CSS选择器的行为完全一致，没有额外封装偏差。
对应代码写法：

$.each($('.class1'), function(){
    // 仅校验当前遍历到的单个元素是否符合data-target的独立值匹配规则
    if ($(this).is('[data-target~="value5"]')) {
        // 执行自定义逻辑
    }
});

这种写法的优势：

• 完全绑定当前遍历的$(this)元素，判断结果随当前元素变化，不存在全局选择器的逻辑脱钩问题。
• 匹配逻辑和CSS属性选择器规则1:1对齐：自动按空格拆分属性值，仅当拆分出的独立单元和目标值完全相等时才判定为匹配，不会出现子串误匹配（比如属性值里的value50不会误匹配目标值value5，解决了你之前用.match()做模糊子串匹配的精度问题）。

方案2：手动拆分属性值做全等比对（灵活可控） #

如果后续需要自定义匹配规则，可以手动读取原始属性值，拆分后做精确比对，注意这里需要用.attr()读取原始字符串，避免jQuery.data()方法的自动类型转换带来的兼容问题：

$.each($('.class1'), function(){
    // 读取data-target的原始字符串值，为空时兜底为空字符串避免报错
    const targetAttrValue = $(this).attr('data-target') || '';
    // 按任意长度的空白字符拆分属性值，只要存在和目标值完全相等的项就算匹配
    const isMatch = targetAttrValue.split(/\s+/).some(item => item === 'value5');
    if (isMatch) {
        // 执行自定义逻辑
    }
});

这种写法的匹配精度和~=规则完全一致，还可以灵活调整比对逻辑，比如忽略大小写、自定义分隔符等。

内容的提问来源于stack exchange，提问作者thothlike