如何在jQuery中检查数据属性是否不包含带有：contains的字符串

Question

是否可以将:not(:contains())选择器应用于数据属性？ 这是我在HTML中的功能：

<input id="keyword">
<button id="find1">Find - 1</button>
<button id="find2">Find - 2</button>

<div class="list_item" data-stringtofind="abc def">abc def</div>
<div class="list_item" data-stringtofind="ghi jkl">ghi jkl</div>
<div class="list_item" data-stringtofind="mno prs">mno prs</div>

我想做的是根据data-stringtofind属性内的内容在点击时对其进行过滤。 我正在尝试使用此代码，但无法正常工作。

$('#find1').on('click', function () {

    var findthis = $('#keyword').val();

    console.log(findthis);

    $( ".list_item.data('stringtofind'):not(:contains("+ findthis +"))").hide();
    console.log(".list_item.data('stringtofind')");

});

这是控制台输出的内容：

Error: Syntax error, unrecognized expression: .list_item.data('stringtofind'):not(:contains(abc))

我是在做一些简单的错误，还是：not：contains无法做到？

该代码有效，但是它在div内而不是在data-stringtofind属性内进行搜索。

$('#find2').on('click', function () {
    var findthis = $('#keyword').val();

    console.log(findthis);

    $( ".list_item:not(:contains("+ findthis +"))").hide();
    console.log(".list_item.data('stringtofind')");

});

这是一个小提琴： https : //jsfiddle.net/mk7yr62k/2/

Answer 1

:contains与属性完全无关。 您需要一个属性子字符串选择器：

$( ".list_item:not([data-stringtofind*='" + findthis + "'])").hide();

[data-stringtofind*='xxx']的意思是“ xxx在任何地方data-stringtofind属性”。 当然， :not否定它。

这是一个例子：

 var p = $("<p>").text("Waiting briefly...").appendTo(document.body); setTimeout(function() { var findthis = "abc"; $( ".list_item:not([data-stringtofind*='" + findthis + "'])").hide(); p.text("Hid the ones not matching 'abc'"); }, 500); 

 <div class="list_item" data-stringtofind="abc def">abc def</div> <div class="list_item" data-stringtofind="ghi jkl">ghi jkl</div> <div class="list_item" data-stringtofind="mno prs">mno prs</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

:contains用于通过元素包含的文本而不是属性的内容来查找元素，因此不适合您的需要。

一种替代方法是该属性包含选择器，但这也将在空格上匹配-即。 bc de将打您的第一个元素。

要解决此问题，您可以使用filter()并将每个元素的数据属性转换为数组，然后使用indexOf()查找匹配项。 尝试这个：

$('#find1').on('click', function () {
    var findthis = $('#keyword').val();

    $('.list_item').filter(function() {
        var arr = $(this).data('stringtofind').split(' ');
        return arr.indexOf(findthis) != -1;
    });
});

工作实例

Answer 3

尝试此操作，它会在每个.list_item搜索您的字符串，如果不匹配.list_item其隐藏。

$('#find1').on('click', function () {
    var findthis = $('#keyword').val();

    $(".list_item").each(function() {
        if ($(this).data('stringtofind').indexOf(findthis) == -1)
            $(this).hide();
    });
});