6

如何data使用 jQuery 根据自定义属性中的内容过滤多个 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>

因此，如果单击小链接，它应该只显示数据大小值包含小的 div，即“小”和“中小”。

我试过了：

$("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

4 回答 4

9

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

于 2016-12-14T13:10:16.510 回答
8

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

$(".size[data-size*='small']");
于 2013-09-23T05:05:43.047 回答
6

尝试

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

演示：小提琴

于 2013-09-23T04:43:39.680 回答
4

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

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

还有它的纯css选择器，这里有更多的checkout

于 2013-09-23T04:51:52.057 回答