JQuery добавить элемент с помощью родительского атрибута

Question

Я пытаюсь пользователь JQuery для, для каждого элемента с помощью класса button-0, добавить новый дочерний элемент с классом button-0-text, и текстом, равным атрибутом исходного button-0 элемента data-text. Я попытался это ...

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"))); 

... но это не работает. Это даже правильный способ сделать это? Любая помощь могла бы быть полезна. Спасибо^^

Answer 1

Попробуйте так:.

$('.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>

Answer 2

Это должно сделать это:

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