Write HTML in reference to attribute data with Javascript

Question

I would like to add a class to an adjacent element using the attribute of an anchor tag with javascript:

HTML:

<ul>
    <li><a href="#" class="swatchButton" data-color="blk"><span></span>Black</a></li>
    <li><a href="#" class="swatchButton" data-color="red"><span></span>Red</a></li>
    <li><a href="#" class="swatchButton" data-color="blu"><span></span>Blue</a></li>
    <li><a href="#" class="swatchButton" data-color="grn"><span></span>Green</a></li>
    <li><a href="#" class="swatchButton" data-color="yel"><span></span>Yellow</a></li>
</ul>

JS:

$(document).ready(function(){
    var swatchColor = $(".swatchButton").data('color');
    $(".swatchButton").find('span').addClass(swatchColor);
});

I'm eventually looking for:

<li><a href="#" class="swatchButton" data-color="blk"><span class="blk"></span>Black</a></li>

Do I need to create some kind of array with forEach()?

Thanks! http://jsfiddle.net/cL1rpk9L/

Tamil Selvan C · Accepted Answer · 2015-03-15 03:33:00Z

3

use each() in jquery

$(document).ready(function(){
    $(".swatchButton").each(function() {
        var swatchColor = $(this).data('color');
        $(this).find('span').addClass(swatchColor);
    });

});

Demo: https://jsfiddle.net/tamilcselvan/cL1rpk9L/3/

edited Mar 15, 2015 at 3:33

answered Mar 11, 2015 at 3:03

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

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

1 Comment

user27068 Over a year ago

This works great, I just had to replace addClass(swatchColor) with `addClass(color) and worked a charm, Thanks!

Arun P Johny · Accepted Answer · 2015-03-11 03:06:52Z

2

Your code var swatchColor = $(".swatchButton").data('color'); will return the data-color of the first element with class swatchButton and $(".swatchButton").find('span').addClass(swatchColor); will assign that value to each span element which is a descendant of an element with class swatchButton.

You need to set the color for each span individually

$('.swatchButton span').addClass(function(){
    return this.parentNode.dataset.color;
});

Demo: Fiddle

or

$('.swatchButton span').addClass(function(){
    return $(this).parent().data('color');
});

Demo: Fiddle

answered Mar 11, 2015 at 3:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

user27068 Over a year ago

I see this is a more elegant solution, but takes me a minute to follow. How would you describe the difference between the 2 solutions? i.e. describe the difference between using $(this).parent)() vs this.parentNode

Arun P Johny Over a year ago

@user27068 one uses the jQuery method($(this).parent)()) where as the other one uses vanila script(this.parentNode) only, so the vanila script based solution will work only on modern browsers(won't work in IE<=8)

user27068 Over a year ago

Great, thanks for the reply! I also found this aka $(this) -> stackoverflow.com/questions/3633270/…

Collectives™ on Stack Overflow

Write HTML in reference to attribute data with Javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related