3

Peço mais uma ajuda a vocês: Tenho um array bidimensional, e queria separá-lo em linhas em uma coluna, por exemplo:

Time 1
Jogador 1
Jogador 2
...

Time 2
Jogador 7
Jogador 8
...

Cheguei até o seguinte código:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

$.each(array, function(i,a){
	i++;
  $('body').append('<ul>Time '+i+'</ul><li>'+a+'</li>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Como faria para ajeitar o código? Obrigado!

2 Respostas 2

4

Teria que fazer 2 laços $.each, um para criar as ul e outra para as li, e não precisa incrementar o i com i++, basta i+1, já economiza 1 linha de código:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

$.each(array, function(i,a){
  $('body').append('<ul><li>Time '+ (i+1) +'</li><ul></ul></ul>')
  
  var ul = $("ul:last"); // seleciona o último ul inserido
  $.each(a, function(i,a){
     ul.append('<li>'+a+'</li>');
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Lembrando que o conteúdo de um elemento <ul> necessita de um <li>: <ul>texto</ul> é inválido. Correto: <ul><li>texto</li></ul>

Agora, se você quiser remover as propriedades padrão dos elementos da lista, tem que usar CSS:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

$.each(array, function(i,a){
  $('body').append('<ul class="lista"><li>Time '+ (i+1) +'</li><ul></ul></ul>')
  
  var ul = $("ul:last");
  $.each(a, function(i,a){
     ul.append('<li>'+a+'</li>');
  });
})
.lista, .lista li, .lista ul{
   margin: 0;
   padding: 0;
   list-style: none;
}

.lista{
   margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Obrigado pela resposta completa!! Ajudou e aprendi também! Commented 27/09/2018 às 1:30
  • Ontem na pressa (e com sono) acabei comentendo alguns erros, mas lendo sua resposta percebi o que errei e atualizei minha resposta. Usar last foi um bom "truque", de fato preciso estudar mais jquery...
    – hkotsubo
    Commented 27/09/2018 às 11:56
3

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

2
  • 1
    Muito obrigado por sua resposta!! Também aprendi mais com a sua resposta!! Commented 27/09/2018 às 1:31
  • 1
    @GuilhermeLirio Na pressa acabei cometendo alguns erros, mas agora a estrutura da lista está correta. Atualizei a resposta.
    – hkotsubo
    Commented 27/09/2018 às 11:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .