Adding class to element with matching custom data attribute

Question

I have a list of elements with Custom Data Attributes. I need to be able to add a class to another element on click when the data attribute of a clicked element matches the data attribute of that element.

HTML

<div data-my-element="value1">click 1</div>  
<div data-my-element="another">click 2</div> 
<div data-my-element="oneMore">click 3</div> 

<section data-my-element="value1"></section>
<section data-my-element="another"></section>
<section data-my-element="oneMore"></section>

JS

$('div').click(function() {
    var myEm = $(this).val('data-my-element');
    $('section[data-my-element = '+myEm+']').addClass('clicked');
});

I think I'm doing something wrong.

FIDDLE

Don't use $(this).val('data-my-element') instead use $(this).data("my-element");. jQuery Data(). — Erik Philips
– Erik Philips, Commented Jul 28, 2014 at 17:18
You can use the data() method to get the value of the data attribute (or the attr method). Your call to val() is actually setting the value (even though val() would not work because that is used for input, select, and textarea) — tabz100
– tabz100, Commented Jul 28, 2014 at 17:19
You're also missing a few things in your script: addClass('clicked'); and }); — Sir Celsius
– Sir Celsius, Commented Jul 28, 2014 at 17:22

imbondbaby · Accepted Answer · 2014-07-28 17:20:26Z

21

Try this:

$('div').click(function() {
    var myEm = $(this).attr('data-my-element');
    //alert(myEm);
    $('section[data-my-element = '+myEm+']').addClass('clicked');
});

You are also missing:

); after } at the end of your code

JSFiddle Demo

answered Jul 28, 2014 at 17:20

imbondbaby

6,4313 gold badges23 silver badges54 bronze badges

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

1 Comment

TRS7 Over a year ago

This helped me a lot after hours of struggling!!

PeterKA · Accepted Answer · 2014-07-28 17:19:24Z

4

Change:

 var myEm = $(this).val('data-my-element');

To:

 var myEm = $(this).data('my-element');

And if any of the data is being inserted or changed dynamically, you may consider using:

$('section').filter(function() { 
    return $(this).data('my-element') == myEm;
}).addClass('clicked');

answered Jul 28, 2014 at 17:19

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

Jay Blanchard · Accepted Answer · 2014-07-28 17:17:59Z

0

Change -

var myEm = $(this).val('data-my-element'); //doesn't have a value

to this -

var myEm = $(this).attr('data-my-element'); // returns the value of the custom attribute

or this

var myEm = $(this).data('my-element');

answered Jul 28, 2014 at 17:17

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Collectives™ on Stack Overflow

Adding class to element with matching custom data attribute

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related