jQuery - 如何通过以属性名开头选择值

Question

我希望能够通过给定属性名称（仅以...开头）来选择属性值。 例如，如果我们有以下 HTML 标签：

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

我想从属性以 data- 开头的值中进行选择

提前感谢您的帮助。

- user3111581

---

如果您有多个以data-开头的属性，你应该获得哪个值呢？ - Anthony Grist

jQuery有一个以某个字符串开头的选择器：http://api.jquery.com/attribute-starts-with-selector/ - Moob

在我的情况下，我只有一个..所以如果我能选择以"data-"开头的属性名称，那就可以了。 - user3111581

@Moob 这是用于查找具有 data- 属性的元素。他想要找到属性的_值_，而不是将其用作选择器。 - Barmar

@Moob - 我实际上想根据属性名称进行选择，类似于$('div').attr('data-*'); - user3111581

Answer 1

如果你想获取所有data-*属性，可以通过遍历jq数据对象来实现：

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

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

编辑

要获取所有以“开头”的属性，您可以自定义自己的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>

- A. Wolff

---

谢谢@A.Wolff，这很有帮助！ - user3111581

@A.Wolff 我们不能访问那些不以"data"开头的其他属性吗？ - Nishan Senevirathna

@NishanSenevirathna 确定，你需要先获取所有属性，然后应用你的逻辑，例如要获取属性，请参见：https://dev59.com/PnI-5IYBdhLWcg3wBjnk - A. Wolff

@NishanSenevirathna 更新了带有自定义选择器的答案。 - A. Wolff

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" />

- Moob

Answer 3

@Moob近似于jQuery attrBegins插件，返回属性名（字符串），当匹配单个元素时（忽略多个匹配）。我调整了代码以返回具有匹配元素的JQuery集合。

以下是代码:

(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仅过滤预选元素集合，不会探索提供的项集合的子元素。

- colxi

Answer 4

属性是元素的属性，所以你可以使用一个`for-in`循环。

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

- Barmar