jQuery - How to select value by attribute name starts with
Solution 1:
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.
EDIT
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>Solution 2:
You could do it as a jQuery plugin. I'm not convinced its the right way to go about it but here's an example:
(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" />