Jquery只追加到第一类元素

Jquery only appending to first class element

本文关键字：一类 元素 追加 Jquery      更新时间：2023-09-26

对于第一次迭代它工作得很好，表按预期创建。然而，在第二次迭代时，下拉菜单为空。循环都工作正确，所以我假设它必须与我如何追加选择的选项有关。谢谢你的帮助。

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>

您正在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)
            )
    );
});

基于append方法文档，您可以通过以下特性传递函数:

一个返回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>')
    })
  )

传递的函数不返回任何结果

相关文章：