jQuery 检查 data-* 属性是否包含 $(this) 的值，然后执行某些操作

编程问答 2022-05-16

问题描述

HTML：

<!-- a class with a data-target attribute with a list of space-seperated values -->
<div class="class1" data-target="value1 value2 value3 ...">
    ...
</div>

<!-- and there might be more than one object with the same class but with same and/or different data-target values -->
<div class="class1" data-target="value4 value5 value2 ...">
    ...
</div>

jQuery：

// looping through each class1 to see if it contains a value and if so do something
$.each($('.class1'),function(){
    if ($(this)...) { // check if data-target of this specific object with class1 contains the value
        // do something
    }
});

用 class1 检查这个特定对象的数据目标是否包含一个我想要的值：

element[data-target~="value5"]

但是在 $(this)

我试过了：

if ($(this).attr('[data-target~="value5"]')) ... // doesn't work (don't kNow why)

if ($('.class1[data-target~="value5"]')) ... // works but apply to all class1 objects and not just the specific one I'm testing

if ($(this).data('target').match('value5')) ... // works but is akin to *= and I want all the match options like ~= |= ^= etc.

但是无论出于什么原因......我需要能够将相当于 [data-target~="value*"] 的东西应用到 $('this')

所以 2 个问题：

  1. 为什么没有 $(this).attr('[data-target~="value5"]') （或 $(this).attr('data-target~="value5"') 呢？ ）工作？
  2. 我该怎么做我想做的事？

解决方法

某些 jquery 方法采用 selector，而另一些则不采用。

.attr() 不带选择器，所以你不能在 [data-target] 中使用 .attr()，只是一个简单的属性名称字符串，.attr("data-target") - 所以这会像您的 .data("target") 示例一样工作，您可以使用 js 根据需要检查值。

相反，您可以使用 .is() 或 .filter()：

if ($(this).is('[data-target~="value5"]'))


$.each($('.class1'),function(){
    if ($(this).is("[data-target~='value3']")) { 
        console.log("yes it is");
    }
    else
        console.log("no it's not");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" data-target="value1 value2 value3">target</div>
<div class="class1" data-target="value1 value2 value5">target</div>

custom-data-attributejquerymatchmatch