3

我想选择所有属性以开头的元素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 方法而不是伪选择器的替代方法。

4

5 回答 5

4

我建议：

$('*').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 小提琴演示。

编辑以提供一个简单的 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 小提琴演示。

这可以使用文字正则表达式如下调用：

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

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

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

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

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

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

参考：

于 2013-03-31T11:46:23.410 回答
3

你不能这样选择属性，左侧需要是一个完整的属性，你只能使用 $= 来查询它的内容。仅供参考 * 不是必需的。

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

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

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

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

jsFiddle

于 2013-03-31T11:47:41.210 回答
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...
})

在这里演示

于 2013-03-31T11:49:52.753 回答
0

您可以在 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();

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

于 2015-02-16T17:02:12.560 回答
-1

由于您不能单独按数据属性名称进行选择（因为它们位于左侧），一种可能的方法是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"])
于 2013-03-31T11:47:56.980 回答