Вставьте элементы массива в элемент div с помощью jQuery

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

$('#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 2

Спасибо всем за помощь! Я сделал это, как сказал Крис Джи:)

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>

Answer 3

Вы можете сопоставить каждый массив команды с массивом <li> s и составьте 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

Попробуй с Array#forEach. И объявить team=[] как массив. Затем нажмите данные с командой.

ДЕМО 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>