按包含字符串的数据属性过滤 div

Posted

技术标签:

【中文标题】按包含字符串的数据属性过滤 div【英文标题】:Filter divs by data-attr containing string 【发布时间】:2013-09-27 21:54:59 【问题描述】:

如何使用 jQuery 根据自定义 data 属性中的内容过滤多个 div?问题是属性可以有超过 1 个值(被视为 1 个字符串)。所以我需要确定data-att 值是否包含字符串。

<a href="">small</a>
<a href="">medium</a>
<a href="">large</a>

<div class="size" data-size="small">small tee</div>
<div class="size" data-size="small medium">small tee</div>
<div class="size" data-size="small medium">small tee</div>
<div class="size" data-size="small">small tee</div>
<div class="size" data-size="medium large">small tee</div>
<div class="size" data-size="medium large">small tee</div>

所以如果点击小链接,它应该只显示 data-size 值包含 small 的 div,即“small”和“small medium”。

我试过了:

$("a").click(function(e) 
    var selectSize = $(this).text();
    filter(selectSize)
            e.preventDefault();
);

function filter(e)
$('.tyre').hide()
    .filter('[data-sizes=""]:contains(' + e + ')')
    .show(); // show the filtered elements

但是不行。

【问题讨论】:

【参考方案1】:

Arun P Johny 的回答是完美的。我采用了他的解决方案并稍作调整以使其更通用。

您可以使用它来匹配字符串的一部分,而不仅仅是整个单词。将来可能会派上用场。

$("#filter").keyup(function()
    var selectSize = $(this).val();
    filter(selectSize);
);

function filter(e) 
    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
    $('.size').hide().filter(function () 
        return regex.test($(this).data('size'))
    ).show();
<input type='text' id='filter'>

<div class="size" data-size="small">small tee</div>
<div class="size" data-size="small medium">small medium tee</div>
<div class="size" data-size="small medium tee">small medium tee</div>
<div class="size" data-size="small">small tee</div>
<div class="size" data-size="medium large">medium large tee</div>
<div class="size" data-size="medium large">medium large tee</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者试试这个FIDDLE

【讨论】:

不错的sn-p。赞克斯! 非常感谢!也许将 JSfiddle 作为 Stack Snippet 带到这里? . . . .有些人使用这个 Nesar 解决方案可能会发现这个其他 sn-p 对于某些语言进行基本过滤非常有用:Remove accents/diacritics in a string in javascript【参考方案2】:

要查找其 data-size 属性包含字符串“small”的元素,您只需执行以下操作:

$(".size[data-size*='small']");

【讨论】:

【参考方案3】:

试试

function filter(e) 
    var regex = new RegExp('\\b' + e + '\\b');
    $('.size').hide()
        .filter(function () 
        return regex.test($(this).data('size'))
    ).show();

演示:Fiddle

【讨论】:

【参考方案4】:

使用这个 css 过滤器 element[attr*=partial] 将找到包含该部分属性的任何元素

function filter(e)
$('.size').hide()
    .filter('[data-sizes*="'+ e +'"]')
    .show(); // show the filtered elements

而且它的纯css选择器,还有更多结帐here

【讨论】:

哇,太好了,干净整洁,谢谢。这会与不支持 css3 选择器的浏览器兼容吗?还是可以,因为 jquery 正在处理这个问题。 小心这个。它是一个通配符选择器,即它会进行类似匹配,而不是完全匹配。例如:如果你有一个运行“smallMedium medium”并寻找small,它也会匹配这个。

以上是关于按包含字符串的数据属性过滤 div的主要内容,如果未能解决你的问题,请参考以下文章

如何按字符串过滤熊猫数据框?

熊猫数据框 - 按字符串过滤/选择列是不是保留顺序?

React - 按对象属性过滤

mongodb - 按字符串数组过滤集合包含“”

Google Cloud Datastore 过滤包含列表中项目的数据

SwiftUI Core Data - NSPredicate 动态过滤字符串数组属性包含给定字符串的位置