通过包含字符串的data-attr过滤div

时间:2013-09-23 04:39:45

标签: jquery filtering

如何使用jQuery根据自定义data属性中的内容过滤多个div?问题是该属性可以有多个值(被视为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>

因此,如果点击小链接,它应该只显示数据大小值包含较小的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
}

但没有去。

4 个答案:

答案 0 :(得分:8)

Arun P Johny的答案是完美的。我采取了他的解决方案并进行了一些调整以使其更加通用。

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

&#13;
&#13;
$("#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();
}
&#13;
<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>
&#13;
&#13;
&#13;

或试试这个FIDDLE

答案 1 :(得分:6)

尝试

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

演示:Fiddle

答案 2 :(得分:5)

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

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

答案 3 :(得分:2)

使用此css过滤器element[attr*=partial]将在属性

中找到包含该部分的任何元素
function filter(e){
$('.size').hide()
    .filter('[data-sizes*="'+ e +'"]')
    .show(); // show the filtered elements
}

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