jQuery append element using parent attribute

Question

I'm trying to user jQuery to, for each element using the class button-0, add a new child element with the class button-0-text, and the text equal to the data-text attribute of the original button-0 element. I tried this...

HTML:

<div class="flex fs-0 button-0" data-text="Enhance"></div>

Javascript:

$(".button-0").append($("<div></div>").addClass("button-0-text").text($(this).parent().attr("data-text")));

...but it's not working. Is this even the proper way to do it? Any help would be really appreciated. Thank you ^.^

Miguel · Accepted Answer · 2016-12-14 12:33:27Z

2

Try this way:

$('.button-0').each(function() {
  $(this).append('<div class="button-0-text">' +$(this).data('text')+ '</div>');
});

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

<div class="flex fs-0 button-0" data-text="Enhance1"></div>
<div class="flex fs-0 button-0" data-text="Enhance2"></div>

answered Dec 14, 2016 at 12:33

Miguel

1,9076 gold badges21 silver badges31 bronze badges

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

Comments

Niklaus · Accepted Answer · 2016-12-14 12:44:29Z

0

This should do it:

var buttons = $('.button-0');
buttons.each(function(i, elem){
  var child = $('<div/>', {'class': 'button-0-text'});
  child.text($(this).data('text'));
  child.appendTo(this);
});

edited Dec 14, 2016 at 12:44

answered Dec 14, 2016 at 12:35

Niklaus

1,0019 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery append element using parent attribute

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