Você está percorrendo o array com each
, e a variável a
representa, a cada iteração, um array
com os jogadores do time.
Ao jogar todo o array a
dentro do li
, você está colocando todos os jogadores no mesmo item da lista.
O correto é percorrer este array a
e colocar cada jogador em seu próprio li
. Mudei também o nome da variável a
para ficar mais claro o que ela é (um array representando um time).
Além disso, o texto "Time x" deve estar fora do ul
, conforme indicado pela resposta do @sam. Uma alternativa seria jogá-lo para fora, fazendo com que cada time faça parte de outra ul
externa.
Ou seja, a estrutura fica assim:
<ul>
<li>Time 1<li>
<li>
<ul>
<li>Jogador 1</li>
<li>Jogador 2</li>
...
</ul>
</li>
<li>Time 2<li>
<li>
<ul>
<li>Jogador 7</li>
<li>Jogador 8</li>
...
</ul>
</li>
</ul>
Em jQuery fica assim:
var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];
// criar lista externa (que vai ter todos os times)
$('body').append('<ul id="lista-times" style="list-style: none">');
// para cada time
$.each(array, function(i, time){
// cria um li com nome do time e outra lista ul para os jogadores
var idTime = 'time' + (i + 1);
$('#lista-times').append('<li>Time '+ (i + 1) + '</li><li><ul id="' + idTime + '">');
// loop para percorrer os jogadores do time
$.each(time, function(j, jogador) {
$('#' + idTime).append('<li>' + jogador + '</li>');
});
$('#lista-times').append('</ul></li>');
})
$('body').append('</ul>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Tem também a opção sem jQuery:
var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];
// cria lista externa (que vai ter todos os times)
let ulExt = document.createElement('ul');
ulExt.style.listStyle = 'none';
// para cada time
array.forEach(function(time, i) {
// cria li com nome do time
let liTime = document.createElement('li');
liTime.appendChild(document.createTextNode('Time '+ (i + 1)));
ulExt.appendChild(liTime);
// cria outra lista ul para os jogadores
let ul = document.createElement('ul');
time.forEach( function (jogador, j) {
let li = document.createElement('li');
li.appendChild(document.createTextNode(jogador));
ul.appendChild(li);
});
let liJog = document.createElement('li');
liJog.appendChild(ul);
ulExt.appendChild(liJog);
});
document.body.appendChild(ulExt);