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

回答

相關問題