Jquery 仅附加到第一类元素

Question

对于第一次迭代它工作正常，表按预期创建。但是在第二次迭代时，下拉菜单是空的。循环都正常工作，所以我假设它必须与我如何附加选择选项有关。感谢任何帮助。

Javascript

function loadPlayers() {

  //first ajax call to retrieve players
  $.ajax({
    url: '/players',
    type: 'GET',
    contentType: "application/json",
    success: function(data) {

      //second ajax call to retrieve presentations
      $.ajax({
        url: '/presentations',
        type: 'GET',
        contentType: "application/json",
        success: function(presentationData) {

          // loop through each player and append player/presentation to table
          data.forEach(function(player) {
            console.log("players")
            $(".player-table").append(
              $('<tr>').append(
                $('<td>').attr('class', 'player-td').append(player.name),
                $('<td>').attr('class', 'presentation-td').append(player.presentation),
                $('<td>').attr('class', 'new-presentation-td').append(
                  $('<select>').attr('class', 'new-presentation-dropdown').append(

                    // loop through each presentation in database and add to dropdown
                    presentationData.forEach(function(presentation) {
                      console.log(presentation.name);
                      $(".new-presentation-dropdown").append('<option>' + presentation.name + '</option>')

                    })
                  )
                )
              )
            )
          })
        }
      })
    }
  })
}

HTML

  <table class="player-table">
    <tr class="player-name-tr">
      <th>Player Name</th>
      <th>Current Presentation</th>
      <th>New Presentation</th>
    </tr>
  </table>

Answer 1

基于append method documentation，您可以通过以下功能传递函数：

返回 HTML 字符串、DOM 元素、文本节点或 jQuery 对象的函数，以插入到匹配元素集中每个元素的末尾。接收集合中元素的索引位置和元素的旧 HTML 值作为参数。在函数中，this 指的是集合中的当前元素。

虽然以下代码与该规则不一致：

$('<select>').attr('class', 'new-presentation-dropdown').append(

   // loop through each presentation in database and add to dropdown
     presentationData.forEach(function(presentation) {
         console.log(presentation.name);
         $(".new-presentation-dropdown").append('<option>' + presentation.name + '</option>')

    })
  )

您不会在传递的函数中返回任何结果。

Answer 2

您正在 append 语句中运行第二个循环 - 这意味着附加选项的循环在创建 <select> 之前运行。由于尚未创建 select 元素，$(".new-presentation-dropdown") 与 DOM 中的任何内容都不匹配。移动在所有.append() 语句之外附加选项的循环应该可以解决这个问题：

data.forEach(function(player) {
    console.log("players");
    $(".player-table").append(
            $('<tr>').append(
                    $('<td>').attr('class', 'player-td').append(player.name),
                    $('<td>').attr('class', 'presentation-td').append(player.presentation),
                    $('<td>').attr('class', 'new-presentation-td').append(
                            $('<select>').attr('class', 'new-presentation-dropdown')
                    )
            )
    );

    // loop through each presentation in database and add to dropdown
    presentationData.forEach(function (presentation) {
        console.log(presentation.name);
        $(".new-presentation-dropdown").append('<option>' + presentation.name + '</option>')
    })
});

但是$(".new-presentation-dropdown") 将匹配每个创建的<select>，因此会产生奇怪的结果。我建议您将$('<select>') 分配给一个变量并将选项附加到该变量，然后再将其附加到表中，如下所示：（未经测试，但应该可以工作）

data.forEach(function(player) {
    console.log("players");

    var $newPresentationDopdown = $('<select>').attr('class', 'new-presentation-dropdown');

    // loop through each presentation in database and add to dropdown
    presentationData.forEach(function (presentation) {
        console.log(presentation.name);
        $newPresentationDopdown.append('<option>' + presentation.name + '</option>')
    });

    $(".player-table").append(
            $('<tr>').append(
                    $('<td>').attr('class', 'player-td').append(player.name),
                    $('<td>').attr('class', 'presentation-td').append(player.presentation),
                    $('<td>').attr('class', 'new-presentation-td').append($newPresentationDopdown)
            )
    );
});