如何将 json 数据从 ajax 响应附加到多个 class

Question

我正在复习 jquery，但运行遇到了障碍。我正在从梦幻足球 api 返回一些 json 数据，我正在尝试找出如何映射数据并将每个球队所有者和名称分配给自己的 div。我的问题本质上是这样的：如何将返回数组的第一个成员分配给 class“player1”，将数组的第二个成员分配给 class“player2”等等。我所能做的就是映射数组并将所有数据显示在一个 div 中，但我无法弄清楚如何为每个数组成员分配自己的 div.

这是我一直在使用的地图功能：

$(document).ready(function() {
    $.ajax({
            url: 'https://api.sleeper.app/v1/league/784456593403224064/users',
            type: 'GET',
            success: function(result) {
                playerData = result.map(result => result.display_name);
                console.log(playerData);
                $("#player1").append(JSON.stringify(playerData));
                // playerData = result
                // console.log(playerData)
            },
            error: function(err) {
                console.log(err)
            }
    })
})

显然这会将所有数据附加到“player1”class，我只需要弄清楚如何像上面提到的那样分配数据。提前致谢！

Answer 1

在您的问题中，您提到了 classes，但您使用的 jQuery 选择器 # 用于 ID。 class 选择器使用 .

在任何情况下，您都可以遍历 API 返回的数据，并使用循环索引动态构建您的选择器：

playerData.forEach((player, item) => {
    $(`#player${item}`).append(player);
});

使用您的代码的示例：

$(document).ready(function() {
    $.ajax({
            url: 'https://api.sleeper.app/v1/league/784456593403224064/users',
            type: 'GET',
            success: function(result) {
                playerData = result.map(result => result.display_name);
                playerData.forEach((player, item) => {
                    $(`#player${item}`).append(player);
                });
            },
            error: function(err) {
                console.log(err)
            }
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<div id="player4"></div>
<div id="player5"></div>
<div id="player6"></div>
<div id="player7"></div>
<div id="player8"></div>
<div id="player9"></div>

如何将 json 数据从 ajax 响应附加到多个 class

How can I append json data from ajax response to more than one class

javascript

jquery

json

ajax