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

我想根据他们在自定义data属性中使用jquery过滤多个div。问题是该属性可能有多个值（它被视为1个字符串）。所以我需要弄清楚data-att值是否包含一个字符串。jquery - 通过包含字符串的data-attr过滤div div123s

<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 
}

，但没有去。

来源

2013-09-23 user2541153

尝试

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

演示：Fiddle

来源

2013-09-23 04:43:39

另一个顶部的答案。谢谢 – user2541153

使用这个CSS滤镜element[attr*=partial]会发现，包含在属性

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

而其纯CSS选择器的部分，有任何元素更多结账here

来源

2013-09-23 04:51:52

哇，这很好，很好，干净谢谢。这是否与不支持css3选择器的浏览器兼容？或者可以，因为jquery正在处理这个问题。 – user2541153

请注意这一点。这是一个通配符选择器，即它会做一个类似的匹配，而不是完全匹配。例如：如果你有一个运行“smallMedium媒体”并寻找小，它也会匹配。 – PSL

查找数据大小属性包含字符串元素“小”，你只需做到这一点：

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

来源

2013-09-23 05:05:43

阿伦P佐尼的答案是完美的。我采取了他的解决方案，稍微调整一下，使其更加通用。

你可以用它来匹配部分字符串，而不仅仅是整个字。未来可能会派上用场。

HTML

<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>

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

尝试在这里FIDDLE

来源

2016-12-14 13:10:16 Nesar

不错的片段。 Zanks！ – FreelanceAr

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

回答

相关问题