使用 jQuery 将数组元素插入到 div 的 li 元素中

Question

我正在尝试用 jQuery 建立一个随机团队创建者。我已经完成了这些功能的工作，它创建了随机团队，但现在我正试图让创建的团队的球员进入 div，排序为 ul。我试过 $('#team1 li').html( team ); 但整个团队显示在一个 li 元素中。如何在一个 li 元素中显示一个玩家？

这是 HTML 代码：

<form>
    <div class="teamsNumber">How many teams do you want to create?<br>
        <input type="text" name="teamsNumber"><br>
    </div>
    <br>
    <div class="players">Players:<br>
        <textarea rows="12" cols="20"></textarea>
    </div>
    <input type="submit" value="Submit"><br>
</form>

<div class="resultingTeams">
    <h1>Team 1</h1>
    <ul id="team1">
        <li id="p1">player 1</li>
        <li id="p2">player 2</li>
        <li id="p3">player 3</li>
        <li id="p4">player 4</li>
        <li id="p5">player 5</li>
    </ul>
</div>

这里是 jQuery 代码：

$(document).ready(function () {

    $("form").submit(function (event) {
        event.preventDefault();

        var playerNames = $(".players textarea").val();
        var players = playerNames.split("\n");
        var playersAmount = (players.length);
        var teamsAmount = $(".teamsNumber input").val();
        var mixedPlayers = [];
        var minIndex = 0;
        var maxIndex = playersAmount - 1;

        for (i = 0; i < playersAmount; i++) {

            var random = getRandom(minIndex, maxIndex);

            while (mixedPlayers[random] !== undefined) {
                random = getRandom(minIndex, maxIndex);
            }

            mixedPlayers[random] = players[i];

        }

        var breakpoint = Math.ceil(playersAmount / teamsAmount);
        $('#resultingTeams').html("");
        for (i = 0; i < teamsAmount; i++) {
            var team = mixedPlayers.splice(0, breakpoint);

            //$('.resultingTeams').append(" ");
            console.log(team)
        }

        function getRandom(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }

        $('#team1 li').html(team);
    });
})

https://jsfiddle.net/uybgdhcp/

Answer 1

尝试使用 Array#forEach。并将 team=[] 声明为 array.Then 与团队一起推送数据。

DEMO jsfiddle

$("form").submit(function(event) {
  event.preventDefault();
var team=[];
  var playerNames = $(".players textarea").val();
  var players = playerNames.split("\n");
  var playersAmount = (players.length);
  var teamsAmount = $(".teamsNumber input").val();
  var mixedPlayers = [];
  var minIndex = 0;
  var maxIndex = playersAmount - 1;

  for (i = 0; i < playersAmount; i++) {

    var random = getRandom(minIndex, maxIndex);

    while (mixedPlayers[random] !== undefined) {
      random = getRandom(minIndex, maxIndex);
    }

    mixedPlayers[random] = players[i];

  }

  var breakpoint = Math.ceil(playersAmount / teamsAmount);
  $('#resultingTeams').html("");
  for (i = 0; i < teamsAmount; i++) {
    team.push(mixedPlayers.splice(0, breakpoint));
    console.log(team)
  }

  function getRandom(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }

  team.forEach(function(a, b) {
    $('#team1 li').eq(b).html(a);
  })



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?<br>
    <input type="text" name="teamsNumber"><br>
  </div>
  <br>
  <div class="players">Players:<br>
    <textarea rows="12" cols="20"></textarea>
  </div>
  <input type="submit" value="Submit"><br>
</form>

<div class="resultingTeams">
  <h1>Team 1</h1>
  <ul id="team1">
    <li id="p1">player 1</li>
    <li id="p2">player 2</li>
    <li id="p3">player 3</li>
    <li id="p4">player 4</li>
    <li id="p5">player 5</li>
  </ul>
</div>

Answer 2

$('#team1 li').html( team ); 本质上是选择 #team1 列表中的所有 <li /> 元素，并将整个团队列表放入每个元素中。

您可能希望在每个列表项中放置一名团队成员。遍历团队成员并将他们一一放入列表中可以通过以下方式实现：

team.forEach(function(teamMember, index) {
  $('#team1 li')         // Selects all the list items in #team1 list
    .eq(index)           // Get's the specific list item at position `index`
    .html(teamMember);   // Puts the contents of `teamMember` in that list item
});

Answer 3

您可以将每个团队数组映射到一个 <li> 数组，然后从那里组成 HTML。

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>

Answer 4

谢谢大家的帮助！我是按照 Chris G 说的做的:)

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>

使用 jQuery 将数组元素插入到 div 的 li 元素中

Insert array elements into a div's li element with jQuery

javascript

arrays

jquery

html-lists

inserthtml