jQuery Change Value Using Data Attribute

Question

I have multiple elements that'll have the same data attributes but with different values, how can I get jQuery to change the value?

Below is some example HTML.

<div data-one="test" data-two="test2"></div>
<div data-one="testing" data-two="hello"></div>
<div data-one="yo" data-two="test3"></div>

By default, I would like to the value of div to be data-one but then when the class active is on the body tag, I would like it to change all the values to the data-two value.

I thought about storing values as a variable which would be easier although the divs don't have any ID's and they're scattered around in the DOM which makes it difficult.

So far I had this:

if($('body').hasClass('active')) {
  $('div').html($(div).data('two'));
}

<div>s don't have values. .val() is for form elements.

Matt Ball
– Matt Ball

2013-05-13 20:45:55 +00:00
Commented May 13, 2013 at 20:45 — Matt Ball
– Matt Ball, Commented May 13, 2013 at 20:45
Oh yes, sorry about that, I've updated the question.

user2352358
– user2352358

2013-05-13 20:47:21 +00:00
Commented May 13, 2013 at 20:47 — user2352358
– user2352358, Commented May 13, 2013 at 20:47

Ram · Accepted Answer · 2013-05-13 20:47:34Z

2

You can use html method.

var has = $('body').hasClass('active');
$('div').html(function() {
    return has ? $(this).data('two') : $(this).data('one');
});

http://jsfiddle.net/44Du5/

answered May 13, 2013 at 20:47

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

dfsq · Accepted Answer · 2013-05-13 20:51:03Z

0

CSS only solution:

body div:after {
    content: attr(data-one);
}
body.active div:after {
    content: attr(data-two);
}

http://jsfiddle.net/dfsq/gaeUR/

However it's not crossbrowser: attr function is supporter in IE8+.

answered May 13, 2013 at 20:51

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

user1 · Accepted Answer · 2013-05-13 20:52:53Z

0

Check this link: http://jsfiddle.net/rjR6q/

$(document).ready(function(){
if($('body').hasClass('active')) {
$('div').each(function(){
    $(this).html($(this).data('two'));
});
}
 else
{
$('div').each(function(){
    $(this).html($(this).data('one'));
});
}
});

answered May 13, 2013 at 20:52

user1

1,0651 gold badge8 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery Change Value Using Data Attribute

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related