jQuery - 如何按属性名称选择值以

Question

我想通过给出属性名称来选择属性值（仅以...开头） 例如，如果我们有html标签

<div class = "slide"  data-confirmID = "46" confirmID = "54"/>

我想从data-

开始选择属性中的值

提前感谢您的帮助。

Answer 1

如果您想要所有data- *属性，可以遍历jq数据对象：

$('.slide').each(function(){
    for(data in $(this).data())
        console.log(data); // returns confirmID so element as an attribute `data-confirmID`
});

但是这个数据对象可以包含其他非属性的键，例如由某些插件设置。

修改

要将各种属性设置为“starts with”，您可以自定义自己的jQuery选择器：

jQuery.extend(jQuery.expr[':'], {
    attrStartsWith: function (el, _, b) {
        for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
            if(atts[i].nodeName.toLowerCase().indexOf(b[3].toLowerCase()) === 0) {
                return true; 
            }
        }
        
        return false;
    }
});

//e.g:
$('.slide:attrStartsWith("data-")').css('color', 'red');
$('.slide:attrStartsWith("conf")').css('color', 'blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide" data-confirmID="46" data-testID="666">1</div>
<div class="slide" confirmID="54" >2</div>

如果在另一侧，您想要检查具有特定字符串的属性结尾，您可以使用：

jQuery.extend(jQuery.expr[':'], {
    attrEndsWith: function (el, _, b) {
        for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
          var att = atts[i].nodeName.toLowerCase(),
              str = b[3].toLowerCase();
            if(att.length >= str.length && att.substr(att.length - str.length) === str) {
                return true; 
            }
        }
        
        return false;
    }
});

$('.slide:attrEndsWith("testID")').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide" data-confirmID="46" data-testID="666">1</div>
<div class="slide" confirmID="54" >2</div>

Answer 2

你可以把它作为一个jQuery插件。我不相信它是正确的方法，但这是一个例子：

(function($) {
    $.fn.attrBegins = function(s) {
        var matched = "";
        this.each(function(index) {
            $.each(this.attributes, function( index, attr ) {
                if(attr.name.indexOf(s)===0){
                   matched =  attr.value
                }
            });
        });
        return matched;
    };
})(jQuery);

//example use
var val = $('div').attrBegins('data-');
alert(val);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide" data-confirmID="46" confirmID="54" />

Answer 3

@Moob aproximation to jQuery attrBegins 插件，返回属性名称（字符串），何时匹配单个元素...（忽略多个匹配）。 我添加了代码以返回带有匹配元素的JQuery Collection。

以下是代码：

(function($) {
    $.fn.attrBegins = function(s) {
        var matched = [];
        this.each(function(index) {
            var elem = this;
            $.each(this.attributes, function( index, attr ) {
                if(attr.name.indexOf(s)===0){
                   matched.push(elem);
                }
            });
        });
        return $( matched );
    };
})(jQuery);

使用示例...

HTML：

<div>
    <div data-pet-dog></div>
    <div data-pet-cat></div>
</div>

Javascript：

 var foo = $("div").attrBegins("data-pet");
// results into... foo = [ <div data-pet-dog></div> , <div data-pet-cat></div> ]

注意：为了防止在使用 attrBegins 选择具有以自定义字符串开头的属性名称的元素时出现性能问题，建议尽可能缩小原始范围选择器，以减少要迭代的元素集合。 attrBegins 只过滤预先选定的元素集合，它不会探索所提供的项集的子元素。

Answer 4

属性是元素的属性，因此您可以使用for-in循环

for (var prop in element) {
    if (prop.indexOf('data-') == 0) {
        var val = element[prop];
        break;
    }
}