How to get all data- * attributes using prefix

Question

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*
});

Please note that the data-info * like attributes can be any number, which means that you can see one of them called data-info1, or from them, named data-info1, data-info2, data-info3.

How would I do this, I was looking for a jQuery selector, something like Attribute Starts With Selector [name ^ = "value"] will not work, because here the variation is by name ...

If I console.log($('#ssd').data());, I get an object with additional 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 an array dataIWantwithout any things that I do not need.

Answer 1

, data-*

jQuery selector:dataStartsWith()

jQuery, :

foo-bar target :

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

:

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.com/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>

Hide result

jQuery $().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.com/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>

Hide result

Answer 2

data-info :

    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')));
    });

Answer 3

if, , . - :

$('#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
        }
    }
});

, if, , .

Answer 4

. JQuery. . , .

HTML- data-* . myprefix.

<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>

data- myprefix data-myprefix-* .prefixData() .

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

:

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