【问题标题】：jQuery - How to select value by attribute name starts withjQuery - 如何按属性名称选择值以
【发布时间】：2014-12-26 18:05:38
【问题描述】：

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

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

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

提前感谢您的帮助。

【问题讨论】：

如果您有多个以data- 开头的属性怎么办？你应该得到哪个值？
jQuery 有一个以选择器开头的：api.jquery.com/attribute-starts-with-selector
在我的场景中我只有一个......所以如果我可以选择以'data-'开头的属性名称，那应该可以
@Moob 用于查找具有data- 属性的元素。他想找到属性的值，而不是把它当做选择器。
@Moob - 我实际上想根据属性名称进行选择，例如 $('div').attr('data-*');

标签： jquery selector attr startswith

【解决方案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 我们不能访问不是从“数据”开始的其他属性吗？
@NishanSenevirathna 当然，您需要先获取所有属性，然后应用您的逻辑，例如要获取属性，请参阅：stackoverflow.com/questions/2048720/…
@NishanSenevirathna 使用自定义选择器更新了答案

【解决方案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" />

【讨论】：

【解决方案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 只是过滤预选元素集合，它不探索提供的一组项目的子元素。

【讨论】：

【解决方案4】：

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

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

【讨论】：