Question

我想选择所有具有以data-something-

开头的属性的元素

例如

<span data-something-random="test">span 1</span>
<span data-nope="nope">span 2</span>
<span data-something-else="another test">span 3</span>

从上面的例子中，我想选择span 1和span 3.

我试过

$('*[$data-validate]')

但它没有用。

也欢迎使用jQuery方法而不是伪选择器的替代方法。

Answer 1

我建议：

$('*').filter(
    function(){
        var that = $(this),
            data = that.data();
        for (var a in data){
            if (data.hasOwnProperty(a)){
                return /^something/.test(a);
            }
        }
    }).css('color','red');

JS Fiddle demo

编辑提供一个简单的jQuery插件，实现相同的功能，要求你传递一个正则表达式：

$.fn.hasAttrMatching = function (expr) {
    var reg, data;
    if (!expr) {
        return this;
    } else {
        if (typeof expr === 'string') {
            reg = new RegExp(expr);
        } else if (typeof expr === 'object' && expr.test) {
            reg = expr;
        }
        return this.filter(function () {
            data = $(this).data();
            for (var a in data) {
                if (data.hasOwnProperty(a)) {
                    return reg.test(a);
                }
            }
        });
    }
};

JS Fiddle demo

使用 literal 正则表达式可以如下调用：

$('body, body *').hasAttrMatching(/^something/).css('color', 'red');

使用正则表达式的字符串表示形式：

$('body, body *').hasAttrMatching('^something').css('color', 'red');

在这一点上提醒你似乎有点明显，但如果没有传入任何表达式（作为正则表达式文字或字符串），那么不会发生过滤，插件将返回它收到的相同元素，以说明：

$('body, body *').hasAttrMatching().css('color', 'red');

正如您在链接演示中所看到的那样，颜色所有元素与原始选择器匹配。

参考文献：

普通JavaScript：
- JavaScript regular expressions。
- Object.hasOwnProperty()。
- test()。
- typeof operator。
jQuery的：
- css()。
- filter()。

Answer 2

您不能以这种方式选择属性，左侧需要是完整属性，您只能使用$ =查询其内容。仅供参考*不是必需的。

$('[data-something-random^=te]')

如果需要，您可以选择这两个属性并将它们添加到一起：

$('[data-something-random]').add('[data-something-else]');

做你想做的事情是可能的，但我不认为jQuery中有开箱即用的支持。一个更好的解决方案可能是为元素添加一个类或其他属性并检查它们。

jsFiddle

Answer 3

试试这个：

// Get all the apan's that starts with data-something
var $span = $('span').filter(function(index){
    var data = $(this).data();
    if (!$.isEmptyObject(data)) {
        var result = false;
        $.each(data, function (key, value) {              
            result = (key.search(/^something/) != -1);
        });
        return result;
    }
    else return false;
});

// Work with the two span's for above example
$span.each(function () {

   // Your code goes here...
})

DEMO HERE

Answer 4

您可以在jQuery中扩展选择器功能：

$.extend($.expr[":"], {
    withAttrLike: function(elem, _, m) {
        var attrs = elem.attributes, pattern = new RegExp(m[3]);
        for (var i = 0; i < attrs.length; ++i)
            if (pattern.test(attrs[i].name))
                return true;
        return false;
    }
});

现在你可以写：

$("div:withAttrLike('^data-something')").hide();

＆＃34;参数＆＃34;新的选择器表达式是一个正则表达式;有点隐秘，在选择器的实现中可用作m[3]（我认为这是正则表达式匹配的结果，它解析了Sizzle内容中的选择器表达式）。该代码实例化一个正则表达式并使用它来测试属性名称。

Answer 5

由于您无法单独选择数据属性名称（因为它们是左侧），因此一种可能的方法是在您的跨度上添加name属性以对数据属性进行逻辑分组，然后选择通过name属性。

HTML：

<span name=data-something-group data-something-random="test">span 1</span>
<span name=data-nope data-nope="nope">span 2</span>
<span name=data-something-group data-something-else="again">span 3</span>

jQuery的：

 $('[name^="data-something-group"])

jQuery通配符选择器

5 个答案: