使用具有多个值的数据属性通过JQuery选择器选择对象

Question

我需要按照多个数据值选择div。

<div data-name='["ab","abcd","abcdf"]' />

$("div[data-name*='ab']")  

但是这种解决方案选择了所有包含“ab”的div。我需要选择只包含“ab”的div。

编辑：最佳解决方案：

<div data-name='["ab","abcd","abcdf"]' />

$("div[data-name*='ab\"']")  

- kira

---

好的，那么请尝试使用 $(div[data-name*='"ab"'])。 - Rajaprabhu Aravindasamy

Answer 1

最好使用.filter过滤列表：

$('div[data-name]').filter(function() {
   return $.inArray("ab", $(this).data('name')) >= 0
});

即选择带有 data-name 属性的任何 div 元素，然后明确挑选其中数组值包含所需元素的那些元素。

- Alnitak

---

var a=$('div').eq(0).data('name'); alert({}.toString.apply(a)) //Array var a=$('div').eq(0).data('name'); alert({}.toString.apply(a)) //Array - Royi Namir

（我想说的是，在这种情况下，$(this).data('name') 是一个纯JS数组） - Royi Namir

嗯，你是对的，但出于某种原因.indexOf一直无法工作......但现在可以了。奇怪。不管怎样，$.inArray更具可移植性。 - Alnitak

请注意，数据必须是正确的JSON语法才能成为数组。如果您使用错误的引号风格，它将失败。 - Alnitak

@RoyiNamir 我可能犯了一个错误，但我不确定是什么错误。 - Alnitak

Answer 2

试试这个：

HTML：

<div data-name='["ab","abcd","abcdf"]' />
<div data-name='["b","abcd","abcdf"]' />
<div data-name='["v","abcd","abcdf"]' />
<div data-name='' />
<div />

Jquery：

var  divList = [];
divList = $('div').filter(function() {
    if($(this).data('name') != "")
   return $.inArray("ab", $(this).data('name')) >= 0
});
alert(divList.length)

工作示例

- Ishan Jain

---

为什么要将jQuery对象转换为本地数组？ - Alnitak

@Alnitak：是的，你说得对，它已经是一个数组对象了。谢谢你提醒我这个愚蠢的错误 :) - Ishan Jain