当我追加它时，为什么我的按钮会重复？

Question

我的按钮应该只对它找到的每个单词追加一次，但不知怎的，它会追加多一次。我不知道是什么原因导致这种情况发生，因此我发布了更多代码，然后只是按钮片和附加片。在我追加之前，我认为出现了问题？在这里你可以看到它的外观：，你可以看到，4个字......但是10个按钮左右，而它应该是4个。

function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
exercises.forEach(function(exercise) {
var exer = $('<div/>', {
    'class': 'row'
  })
  .append(
    $('<div/>', {
      'class': 'col-md-3'
    })
    .append(
      $('<div/>', {
        'class': 'row'
      })
      .append($('<div>', {
        class: 'col-md-3 testforbutton',
       // text: "(button here)"
      }))
      .append($('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries
        text: exercise.word
      }))
    )
  ).append(
    $('<div>', {
      class: 'col-md-9',
      text: "(4 x col-3 here)"
    })
  );

$("#exerciseField").append(exer);
ID123++;
$('.testforbutton').append(getAudioForWords());
});
}

createExercise(fakejson);


function getAudioForWords() {
    var audioBtn = $('<button/>', {
    'class': 'btn btn-primary fa fa-volume-up sound'
   });
   return audioBtn;
 }

Answer 1

从代码中， exercise 的每次迭代都会向所有现有的testforbutton元素添加一个按钮，在先前添加的行中复制按钮。

只需将您的选择器限制为搜索当前testforbutton元素中的exer元素

exer.find('.testforbutton').append(getAudioForWords());