Add multiple values to data attributes using jQuery

Question

Below is the code.

<body>
<div class="test" >Test</div>

<script>
var count =1;
$('body').on('click', '.test', function () {

    $('.test').attr('data-count',count);
    count ++;
})

I want to add multiple values to data-count like this, data-count="1,2,3,4". How can i do that ?

If you comma-separate the values in the data attribute, how are you planning on reading them back in — have you thought about that? — Coby
– Coby, Commented Aug 25, 2014 at 19:02
basically i am planning to use shuffle.js and for that i need to set multiple values to data attribute. Based on my code above, everytime i click, i need to add this value dynamically to data-count, would appreciate if you can correct my code. — user3751873
– user3751873, Commented Aug 25, 2014 at 19:05
@user3751873 - You may accept the answer that you found most helpful by clicking the tick mark on the left of the answers posted. — Alok Swain
– Alok Swain, Commented Aug 26, 2014 at 7:11

Johan · Accepted Answer · 2014-08-25 19:13:45Z

1

A solution without global variables:

$('body').on('click', '.test', function () {

    var $this = $(this),
        count = $this.data('i') || 1,
        $test = $('.test');

    count++;
    $this.data('i', count);

    var result = [];

    for(var i = 1; i < count; i++){
        result.push(i);
    }

    $test.attr('data-count', result.toString());
});

http://jsfiddle.net/r7ny77s9/

answered Aug 25, 2014 at 19:13

Johan

35.4k62 gold badges191 silver badges309 bronze badges

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

1 Comment

Fr0zenFyr Over a year ago

or $test.data('count', result); and $test.data('count') to get the array back. I know the answer is old, that's why posted this comment so you can update your answer if you wish.

guest271314 · Accepted Answer · 2014-08-25 19:13:34Z

0

Similar to Alok Swain's Answer, saving data-* count as an array at the element

var count = 1;
var arr = [];
$(".test").data("count", arr);
$('body').on('click', '.test', function () {
    $('.test').data("count", arr.push(count));
    count++;
});

answered Aug 25, 2014 at 19:13

guest271314

1

Comments

Alok Swain · Accepted Answer · 2014-08-25 19:14:39Z

0

var count = 1;
var countArr = [];
$('body').on('click', '.test', function () {
    countArr.push(count);
    $('.test').attr('data-count', countArr.join(","));
    count ++;
});

Edit: without using the second variable

var count = 1;

$('body').on('click', '.test', function () {    
  var testVal = $('.test').attr('data-count') === undefined ? count : $('.test').attr('data-count') + "," + count;
  $('.test').attr('data-count', testVal);
    count ++;
});

edited Aug 25, 2014 at 19:14

answered Aug 25, 2014 at 19:08

Alok Swain

6,5195 gold badges41 silver badges60 bronze badges

1 Comment

user3751873 Over a year ago

Thanks alot Alok it worked, i didnt see any example on jquery website, why is this so ?

Collectives™ on Stack Overflow

Add multiple values to data attributes using jQuery

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related