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

Question

I am trying to build a random teams creator with jQuery. I've finished working on the functions, it creates random teams, but now I'm trying to get the created teams' players into divs ordered as ul . I've tried with $('#team1 li').html( team ); but the whole team is displayed in one li element. How can I display one player in one li element?

Here is the HTML code:

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

Here is the jQuery code:

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

Try with Array#forEach .And declare the team=[] as a array.Then push the data with team.

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 ); essentially selects all the <li /> elements in the #team1 list and puts the whole team list in each.

You probably want to put one team member in each list item. Looping over the team members and putting 'em one by one into the list could be achieved with something like this:

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

You can map each team array to an array of <li> s and compose the HTML from there.

 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

Thank you all for helping! I did it how Chris G said :)

 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>