I have a tag like this:

<a href="#" id="ssd" data-toggle="popover" data-info1="demo text: 1" data-info2="demo text: 2" data-info3="demo text3">Link</a>

When I click this link, I have a function like this

$('#ssd').click(function (event) {
    var customData;
    // Code to get all the custom data in format like data-info*
});

Note, the data-info* like attributes could be any number, that means you could see 1 one of them, named data-info1, or there of them, named data-info1, data-info2, data-info3.

How would I do that, I looked up the JQuery selectors, something like Attribute Starts With Selector [name^="value"] won't work because the variation here is on name...

If I console.log($('#ssd').data()); I will get an object with extra attributes that I don't need, toggle: "popover", bs.popover: Popover

Any suggestions?

This is what I did:

dataFullList = $(this).data();
$.each(dataFullList, function (index, value) {
    if (index !== "toggle" && index !== "bs.popover") {
        item.name = value.split(":")[0];
        item.number = value.split(":")[1];
        dataIWant.push(item);
    }
});

So I will get a dataIWant array without stuff I don't need.

I have a tag like this:

<a href="#" id="ssd" data-toggle="popover" data-info1="demo text: 1" data-info2="demo text: 2" data-info3="demo text3">Link</a>

When I click this link, I have a function like this

$('#ssd').click(function (event) {
    var customData;
    // Code to get all the custom data in format like data-info*
});

Note, the data-info* like attributes could be any number, that means you could see 1 one of them, named data-info1, or there of them, named data-info1, data-info2, data-info3.

How would I do that, I looked up the JQuery selectors, something like Attribute Starts With Selector [name^="value"] won't work because the variation here is on name...

If I console.log($('#ssd').data()); I will get an object with extra attributes that I don't need, toggle: "popover", bs.popover: Popover

Any suggestions?

This is what I did:

dataFullList = $(this).data();
$.each(dataFullList, function (index, value) {
    if (index !== "toggle" && index !== "bs.popover") {
        item.name = value.split(":")[0];
        item.number = value.split(":")[1];
        dataIWant.push(item);
    }
});

So I will get a dataIWant array without stuff I don't need.

• javascript
• jquery
• html
• twitter-bootstrap

• 1 Just go with .data() and deal with having extra. If you're looping over the properties, at most you'll iterate 2-3 extra times. Any alternative solution will result in far more looping. – Kevin B Commented Jan 15, 2015 at 21:35
• As I said, when I loop through the properties, I don't know how to get properties in format like data-info, I go to .data() documention and if you find a solution there, please let me know. – Xinrui Ma Commented Jan 15, 2015 at 21:45
• 1 When you are looping, you will have the key. If the key is "info#" then you know it's one of the ones you want. There is no built-in way to filter the properties returned to only the ones you want. – Kevin B Commented Jan 15, 2015 at 21:46
• Sorry had to edit your question with a better title (easier to find on Goog). Upvoted your Question cause you show a really good effort in formatting it and asking. (The downvotes are probably from before your edit...) Any way, happy coding. – Roko C. Buljan Commented Jan 15, 2015 at 22:19

4 Answers 4

Target all elements which data-* starts with

Custom jQuery selector selector:dataStartsWith()

Here's a custom jQuery selector that will help you to:

Given the data-foo-bar prefix , target the following elements:

data-foo-bar
data-foo-bar-baz

but not:

data-foo-someting
data-something

jQuery.extend(jQuery.expr[':'], { 
  "dataStartsWith" : function(el, i, p, n) {  
    var pCamel = p[3].replace(/-([a-z])/ig, function(m,$1) { return $1.toUpperCase(); });
    return Object.keys(el.dataset).some(function(i, v){
      return i.indexOf(pCamel) > -1;
    });
  }
});


// Use like:
$('p:dataStartsWith(foo-bar)').css({color:"red"});  

// To get a list of data attributes:
$('p:dataStartsWith(foo-bar)').each(function(i, el){
  console.log( el.dataset );
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p data-foo-bar="a">I have data-foo-bar</p>
<p data-foo-bar-baz="b" data-extra="bbb">I have data-foo-bar-baz</p>
<p data-bar="a">I have data-bar DON'T SELECT ME</p>
<p data-something="b">I have data-something DON'T SELECT ME</p>

Custom jQuery Method $().dataStartsWith()

$.fn.dataStartsWith = function(p) {
  var pCamel = p.replace(/-([a-z])/ig, function(m,$1) { return $1.toUpperCase(); });
  return this.filter(function(i, el){
    return Object.keys(el.dataset).some(function(v){
      return v.indexOf(pCamel) > -1;
    });
  });
};


$('p').dataStartsWith("foo-bar").css({color:"red"});  

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p data-foo-bar="a">I have data-foo-bar</p>
<p data-foo-bar-baz="b" data-extra="bbb">I have data-foo-bar-baz</p>
<p data-bar="a">I have data-bar DON'T SELECT ME</p>
<p data-something="b">I have data-something DON'T SELECT ME</p>

This function will get the data-info attributes and put them into an array:

    function getDataInfo($element, i, a) {

        var index = i || 1, array = a || [],
            info = $element.data('info' + index);

        if(info === undefined) {
            return array;
        }

        array['info' + index] = info;

        return getDataInfo($element, index + 1, array);
    }

    $(function() {
        console.log(getDataInfo($('#ssd')));
    });

Here's an if condition to isolate the invalid keys while you loop the data. Used as a filter, you can choose to delete the keys you do not want - like this:

$('#ssd').click(function(e){
    var data = $(this).data();
    for(var key in data) {
        //here is a condition to use only those data-info items
        if(data.hasOwnProperty(key) && key.indexOf('info') === -1) {
            console.log(key); //just to see which key it is
            delete data[key]; //if you need to build a collection of only data-info keys
        }
    }
});

Alternatively, negate the if condition to include only those keys you want.

You can use Prefix Data. It is jQuery plugin. Return the value at the prefixed data store for the first element in the set of matched elements. Returned value can be an object based on the attribute values and attributes name structure.

Usage

Take any HTML tag with multi data-* attributes with the same prefix. In the example we focus on myprefix prefix.

<div id="example-tag"
     data-myprefix='{"property1": "value1", "property2": {"property21": "value21"}, "property3": "value2"}'
     data-myprefix-property2='{"property22": "value22"}'
     data-myprefix-property2-property23="value23"
     data-myprefix-property3="overwite-value3"
     data-myprefix-property4='{"property41": "value41"}'
     data-other="We do not read it"></div>

If you want to read data from data-myprefix and every data-myprefix-* attribute you can use .prefixData() with given prefix.

$('#example-tag').prefixData('myprefix');

The previous example returns the object:

{
    property1: "value1",
    property2: {
        property21: "value21",
        property22: "value22",
        property23: "value23"
    },
    property3: "overwite-value3",
    property4: {
        property41: "value41"
    }
}