Append new attribute in existing div jquery

Question

I have a class in html like this below:

<div class="animsition">

Now I want to append a new attribute in that existing div using jquery. I like the animstion class will become:

 <div class="animsition" data-animsition-in-class="fade-in-left"
  data-animsition-in-duration="1000" data-animsition-out-class="fade-out-left"
  data-animsition-out-duration="800">

I tried but not work: $(".animsition").attr("data-animsition-in-class","fade-in-left");

How will I achieve this? Any help would be much appreciated.

Can you try console.log($(".animsition").length()) and see if it returns 1? If not, than JQuery can't find your div. — Nemanja Todorovic
– Nemanja Todorovic, Commented Jun 1, 2016 at 10:30

Jayesh Chitroda · Accepted Answer · 2016-06-01 10:30:38Z

1

Just take care you have added attribute within document.ready()

$(document).ready(function() {
   $(".animsition").attr("data-animsition-in-class","fade-in-left");
});

answered Jun 1, 2016 at 10:30

Jayesh Chitroda

5,03915 silver badges18 bronze badges

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

Comments

Nenad Vracar · Accepted Answer · 2016-06-01 10:31:02Z

You can put all those attributes in one object and use for...in loop and attr()

var attr = {
  'data-animsition-in-class': "fade-in-left",
  'data-animsition-in-duration': "1000",
  'data-animsition-out-class': "fade-out-left",
  'data-animsition-out-duration': "800"
}

for (var a in attr) {
  $('.animsition').attr(a, attr[a]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animsition">Lorem</div>

Or you can use Object.keys()

var attr = {
  'data-animsition-in-class': "fade-in-left",
  'data-animsition-in-duration': "1000",
  'data-animsition-out-class': "fade-out-left",
  'data-animsition-out-duration': "800"
}

Object.keys(attr).forEach(function(a) {
  $('.animsition').attr(a, attr[a]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animsition">Lorem</div>

Collectives™ on Stack Overflow

Append new attribute in existing div jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related