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=[]声明为数组。然后与团队一起推送数据。

DEMO jsfiddle

＆＃13;

$("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);
  })



});

＆＃13;

<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>

＆＃13;

Answer 2

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

您可能希望在每个列表项中放置一个团队成员。循环使用团队成员并将其逐个放入列表可以通过以下方式实现：

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

谢谢大家的帮助！我这样做了，克里斯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元素中

4 个答案: