jQuery-如何通过属性名称选择值以 [英] jQuery - How to select value by attribute name starts with

问题描述

我想通过提供属性名称来选择属性值(仅以开头) 例如，如果我们有html标签

I want to select attribute value by giving attribute name (only starts with) For instance if we have html tag

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

我想从以data-

预先感谢您的帮助.

推荐答案

如果需要所有data- *属性，则可以遍历jq数据对象:

If you want all data-* attributes, you can iterate through jq data object:

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

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

But this data object can contains other keys which aren't attribute, setted for example by some plugins.

要获取开始于"的各种属性，可以自定义自己的jQuery选择器:

To get all kinds of attribute to "starts with", you can customize your own jQuery selector:

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>

如果在另一侧，要检查以特定字符串结尾的属性，则可以使用:

If on the opposite side, you want to check for attribute ends with specific string, you can use:

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>

这篇关于jQuery-如何通过属性名称选择值以的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！