Dans mon exemple, j’ai trois containers <div class="payment-method" />
qui sont présents dans le DOM. Chacun de ces containers possède son propre bouton. Je cherche à ajouter un seul nouveau bouton dans chaque container qui n’est pas tout-à-fait un clone de celui qui existe déjà, mais qui en reprend le code HTML enfant.
Problème: avec le code ci-dessous, les trois boutons que j’ajoute sont créés une fois dans chaque container. En d’autres termes, je me retrouve avec quatre boutons (au lieu de deux) dans chaque container.
1 2 3 4 5 6 7 |
$(".payment-method").each(function(e) { let $this = $(this); let placeOrderBtn = $("button.checkout", $this); let placeOrderBtnHtml = placeOrderBtn.html(); $('<div class="primary"><button class="action primary">' + placeOrderBtnHtml + '</button></div>').appendTo('.actions-toolbar', $this); }); |
Solution: le souci provient d’une mauvaise utilisation de $(this)
en combinaison de .each()
. Ci-dessous le code qui me donne le résultat attendu:
1 2 3 4 5 6 7 8 |
$(".payment-method").each(function(index, element) { let $this = $(this); let placeOrderBtn = $this.find("button.checkout"); let placeOrderBtnHtml = placeOrderBtn.html(); let actionsToolbar = $this.find('.actions-toolbar'); $('<div class="primary"><button class="action secondary" type="button">' + placeOrderBtnHtml + '</button></div>').appendTo(actionsToolbar); }); |