Question

我有一组作为数组的HTML5对象的属性。像

这样的东西

<button attr=[1,0,0,0,1,1]>test</button>
<button attr=[1,1,0,0,1,1]>test</button>
...

如何制定jQuery选择器以仅匹配attr的第n个值为1的元素？像$("attr[1]=1")之类的东西只能从这个例子中选择第二个按钮（这种语法不起作用，但我写的只是为了让我知道我需要的东西）。

在我的情况下，我不处理按钮，而是使用其他类型的对象，我只是想简化问题的上下文。

Answer 1

您可以使用自定义过滤器仅选择匹配的元素。

<button data-attr="[1,0,0,0,1,1]">button 1</button>
<button data-attr="[1,1,0,0,1,1]">button 2</button>

请注意，attr不是按钮的有效html属性。我建议您改用data-attr。您可以使用.data('attr')来获取数据。

var selected = $('button').filter(function (idx) {
    var attr = $(this).data('attr');
    return attr && attr[1] == 1;
});
alert(selected.html());

jsFiddle Demo

Answer 2

您可以像这样编写自己的选择器（我称之为＆＃34;数组＆＃34;，您可以在这里使用更好的名称）：

jQuery.expr[':'].array = function (elem, index, match) {
    var params = match[3].replace(/^\s+|\s+$/g, '').split(/\s*,\s*/),
        attribute = params[0],
        arrayindex = parseInt(params[1]),
        matchvalue = params[2],
        value = JSON.parse($(elem)[attribute](attribute));
    return value[arrayindex] == matchvalue;
};

然后，像任何其他选择器一样使用它，其中第一个参数是属性的名称，第二个参数是数组中的索引，第三个参数是期望值：

$('button:array(attr,1,1)');

小提琴：http://jsfiddle.net/pascalockert/uDnK8/2/

jQuery选择器：匹配数组属性的第n个值

2 个答案: