jQuery 检查 data-* 属性是否包含 $(this) 的值，然后做一些事情

Question

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 个问题：

为什么 $(this).attr('[data-target~="value5"]')（或 $(this).attr('data-target~="value5"') 就此而言）不起作用？
我如何做我想做的事？

Answer 1

一些 jquery 方法接受 selector 而其他方法不接受。

.attr() 不带选择器，所以你不能在 .attr() 中使用 [data-target]，只是属性名称的简单字符串，.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>

jQuery 检查 data-* 属性是否包含 $(this) 的值，然后做一些事情

jQuery check data-* attribute if it contains value with $(this) and then do something

jquery

match

custom-data-attribute