Retrieve value from HTML Object

I have the following div (this was already given to me, I did not create it):

<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

as far as my understanding goes (please correct me if I am wrong), we are saying here, that I want to assing the following values (such as slideCount, moveCount, customLink, etc...) to the object named data-sudo-slider.

What I am trying to do in my underlying JavaScript, is to retrieve the value of pause from this object. Here is what I am doing:

var sudoEl = jQuery('[data-sudo-slider]'); 
var pause = sudoEl.pause;

Even though it recognized the slider object, it did not retrieve the value for pause I have passed in (returned value is undefined.

How can I retrieve this value?

Answers 1

  • You can use data() like this:

    The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:

    $('[data-sudo-slider]').data('sudoSlider').pause;
    

    why did you have to specify 'sudoSlider'?

    You can also use sudo-slider.

    It worked as the property name is derived as following:

    1. The attribute name is converted to all lowercase letters.
    2. The data- prefix is stripped from the attribute name.
    3. Any hyphen characters are also removed from the attribute name.
    4. The remaining characters are converted to CamelCase. The characters immediately following the hyphens removed in Step 3 become uppercase.

Related Articles