jQuery的 - 如何通过属性名称来选择价值与

Question

，我首先要给属性名称（仅开头） 例如，选择属性值，如果我们有HTML标记

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

开始我要选择的值从属性开始data-

在此先感谢您的帮助。

Answer 1

如果您希望所有数据 - *属性，可以通过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>

个

Answer 2

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

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

Answer 3

你可以做到这一点作为一个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 4

@Moob aproximation将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只是筛选预先选定的元素集合，它不会探索提供的一组项目的子元素。