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只是篩選預先選定的元素集合，它不會探索提供的一組項目的子元素。