jQuery 通配符选择器

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>

在上面的示例中，我想选择跨度 1 和跨度 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 .

可以使用文字正则表达式来调用它:

$('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() .