时间戳

首页 > 解决方案 > jQuery 检查 data-* 属性是否包含 $(this) 的值，然后执行某些操作

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

问题描述

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. 我该怎么做我想做的事？

标签： jquerymatchcustom-data-attribute

解决方案

一些 jquery 方法采用 aselector而另一些则没有。

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

相反，您可以使用.is()or .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>

推荐阅读