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

Question

假设我有以下元素

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

现在我想要 select 个在其数据标签属性中具有“8”的元素，我将如何使用 jquery 来做到这一点？我正在尝试 $('[data-tags~=8]') 也 $('[data-tags~="8"]') 但它们都不起作用。感谢任何帮助。

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

Answer 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 如何 select 数据属性数组中包含特定值的元素？

Jquery how to select elements containing specific value(s) in data attribute array?

jquery

jquery-selectors

custom-data-attribute