Jquery如何在数据属性数组中选择包含特定值的元素？

Posted 2023-05-09

【中文标题】Jquery如何在数据属性数组中选择包含特定值的元素？

【英文标题】：Jquery how to select elements containing specific value(s) in data attribute array?

【发布时间】：2021-02-06 09:23:32

【问题描述】：

假设我有以下元素

<div data-tags="[8,18,32,52,53,56]"></div>
<div data-tags="[8,2,3]"></div>
<div data-tags="[4,6,10]"></div>

现在我想选择其 data-tags 属性中具有“8”的元素，我将如何使用 jquery 来做到这一点？ 我正在尝试 $('[data-tags~=8]') 也 $('[data-tags~="8"]') 但它们都不起作用。任何帮助表示赞赏。

编辑： 我不认为 $('[data-tags*=8]') 会是一个解决方案，因为它还会包含值为 18、86 804 等的项目，对吧？

【参考方案1】：

您可以使用以下内容：

var found = $('div[data-tags]').filter(function() 
  return JSON.parse($(this).attr("data-tags")).indexOf(8) > -1
)

演示

var found = $('div[data-tags]').filter(function() 
  return JSON.parse($(this).attr("data-tags")).indexOf(8) > -1
)
var found2 = $('div[data-tags]').filter(function() 
  return JSON.parse($(this).attr("data-tags")).indexOf(18) > -1
)
console.log("Found",found.length, "by number 8");
console.log("Found",found2.length, "by number 18");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-tags="[8,18,32,52,53,56]"></div>
<div data-tags="[8,2,3]"></div>
<div data-tags="[4,6,10]"></div>

【讨论】：

好吧，看起来这确实帮助我实现了我想要的。如果没有添加更清洁的解决方案（纯粹只是 jquery 选择器），我将再等一个小时，我会将您的解决方案标记为已接受的答案。谢谢

@Matrix 你可以使用$('div[data-tags*="8"]')，但这也会被18,28选中，以此类推

是的，我想会的。再次感谢。我对您的解决方案进行了一些修改（只是个人喜好）$('div[data-tags]').filter(function()return $.inArray(8, $(this).data("tags")) != -1;);