jQuery get a string property of a data attribute

Question

What would be the most efficient way to get the value 14500from the data-ls attribute below. I have never seen multiple properties for a single data attribute before, and I am looking for the faster way to extract the value and not have it depend on the order of the data attribute properties.

<div class="slide" data-ls="slidedelay:14500; transition2d: all;"></div>

.

var duration = $('.slide').data('ls').split(';');
duration = duration[0].split(':');
console.log("duration: " + duration[1]);

thanks

There isn't a way to access the data inside data-ls as an object that I know of. You may simply have to exact it from the sting "slidedelay:14500; transition2d: all;". — Spencer Wieczorek
– Spencer Wieczorek, Commented Aug 23, 2015 at 2:55

Kamina · Accepted Answer · 2015-08-23 02:51:56Z

3

How about to do a loop on your split var then check the key if it's slidedelay to be sure.

e.g.

var duration = $('.slide').data('ls').split(';');
var slidedelay = "";
if(duration) {
    $.each( duration, function( key, value ) {
        val = value.split(':');
        if(val) {
          if(val[0] == "slidedelay") {
            slidedelay = val[1];
            return false;  // then break loop 
          }
        }
    });
}


console.log("duration: " + slidedelay);

Fiddle

answered Aug 23, 2015 at 2:51

Kamina

13.8k12 gold badges55 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

László Kardinál · Accepted Answer · 2015-08-23 02:59:52Z

1

var duration = $('slide').data('ls').match( /slidedelay *: *(.*?);/ )[1];

Regular expression visualization

Debuggex Demo

It returns the first matching string, so if you need it as a number, you need to use parseInt().

answered Aug 23, 2015 at 2:59

László Kardinál

3161 silver badge7 bronze badges

1 Comment

Benjamin Over a year ago

Thanks Laszlo..Not sure its faster than Robin's answer but I like the clean code.

Grald · Accepted Answer · 2015-08-23 02:59:29Z

0

Try this one:

<div class="slide" data-ls="slidedelay:14500; transition2d: all;"></div>

JS:

 var x = document.getElementsByTagName("div")[0].getAttribute("data-ls");
var x = x.split(":"); var val = x[1].split(';');
alert(val[0]);

JSFIDDLE https://jsfiddle.net/Grald/cgy5drL4/1/

edited Aug 23, 2015 at 2:59

answered Aug 23, 2015 at 2:47

Grald

4745 silver badges16 bronze badges

1 Comment

Spencer Wieczorek Over a year ago

I think you misunderstood the question. They want to get 14500.

Shlomi Hassid · Accepted Answer · 2015-08-23 03:04:15Z

0

Easy and quick way: JSnippet Demo

function getFrom(selector) {
    var val = null;
    var x = $(selector)[0]
             .getAttribute("data-ls")
             .split(' ')[0]
             .split(':');
    if (x.length > 1) val = parseInt(x[1]);
    return val;
}

$(function() {

    console.log(getFrom('.slide'));

});

answered Aug 23, 2015 at 3:04

Shlomi Hassid

6,6063 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery get a string property of a data attribute

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related