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语句中运行第二个循环 - 这意味着附加选项的循环在创建<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)
            )
    );
});

Answer 2

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

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

代码下面的whiles与该规则不一致：

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

    })
  )

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

Jquery只附加到第一类元素

2 个答案: