How to change sub element of data attribute using jquery

Question

I want to change sub element of below data attribute

<div class="blue-shape"
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>

for this i have added below jquery code but it doesn't work

$(document).ready(function(){
    jQuery('.blue-shape').attr("data-actions",{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''});
});

.blue-shape is div class name where i want to change data attribute

jQuery.attr expects second parameter to be string

Iceman
– Iceman

2016-07-11 10:10:23 +00:00
Commented Jul 11, 2016 at 10:10 — Iceman
– Iceman, Commented Jul 11, 2016 at 10:10
The attribute's just encoded as JSON.

gcampbell
– gcampbell

2016-07-11 10:12:48 +00:00
Commented Jul 11, 2016 at 10:12 — gcampbell
– gcampbell, Commented Jul 11, 2016 at 10:12

Jai · Accepted Answer · 2016-07-11 10:23:16Z

2

You can pass a function as a second arguement and you can iterate over to change any value like:

jQuery(document).ready(function($) {
  console.log($('.blue-shape').data('actions'));
  
  $('.blue-shape').attr("data-actions", function() {
    var arr = $(this).data('actions'), newArr = [];
    $.each(arr, function(i, obj){
       if(obj.slide === "rs-18"){
          obj.slide = "rs-16"
       }
       if(i === arr.length-1){ newArr.push(obj); }
    });
    return newArr;
  });
  
  console.log($('.blue-shape').data('actions'));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'></div>

answered Jul 11, 2016 at 10:23

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

Comments

Iceman · Accepted Answer · 2016-07-11 10:12:19Z

0

jQuery.attr() expects second parameter to be string.

have a look at jQuery.data() also

$('document').ready(function() {
  jQuery('.blue-shape')
    .attr("data-actions", "{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>DATA</div>

answered Jul 11, 2016 at 10:12

Iceman

6,1652 gold badges25 silver badges34 bronze badges

Comments

palaѕн · Accepted Answer · 2016-07-11 10:13:00Z

0

You need to pass string in 2nd param or you can simply use data() method too like:

console.log($('.blue-shape').data("actions"));
$('.blue-shape').data("actions","[{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}]");
console.log($('.blue-shape').data("actions"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="blue-shape"
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>

answered Jul 11, 2016 at 10:13

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Joyson · Accepted Answer · 2016-07-11 10:15:39Z

0

I just updated your jquery with this following code please check and vote if it works

$('document').ready(function(){
jQuery('.blue-shape').attr("data-actions","[{'event':'mouseenter', 'action':'jumptoslide', 'slide':'rs-16','delay':''}]");
});

For Reference

https://jsfiddle.net/jasonantho/6ehmded3/

answered Jul 11, 2016 at 10:15

Joyson

3804 silver badges19 bronze badges

4 Comments

Dipesh Over a year ago

sorry! this gives error SyntaxError: unterminated string literal

Joyson Over a year ago

Have u checked the fiddle it works fine no error is thrown please check the fiddle

Dipesh Over a year ago

i'm using jquery version 1.11.3. so, i need to use another or not??

Joyson Over a year ago

Ya i hope so i m using 1.12 ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js use this and check thanks @Dipesh

Collectives™ on Stack Overflow

How to change sub element of data attribute using jquery

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related