Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Ordenar divs pelo atributo

Referente ao curso JavaScript: programando na linguagem da web

por João Carlos Duarte Wisnesky
| 101.8k xp | 7 posts

tenho un grupo de divs e gostaria de ordena-las de acordo com os seus atributos internos:

    <div id="olimpico">
        <div class="topo-medalhas"> 
            <div class="topo-posicao">#</div>
            <div class="topo-pais">pa&iacute;s</div>
            <div class="topo-ouro"><img class="medalhas" src='imagens/medalha-ouro.png' />ouro</div>
            <div class="topo-prata"><img class="medalhas" src='imagens/medalha-prata.png' />prata</div>
            <div class="topo-bronze"><img class="medalhas" src='imagens/medalha-bronze.png' />bronze</div>
            <div class="topo-total"><img class="icon-total" src='imagens/medalhas-total.png' /><br>total</div>
        </div>
        <br class="clear">
        <div class="bloco-ini">
            <div class="colocacao">
                <div class="posicao">1</div>
                <div class="bandeira sprite-ui sprite-flags--ANT-LARGE"></div>
                <div class="pais">Antígua e Barbuda</div>
                <div class="sigla">ANT</div>
                <div class="ouro">0</div>
                <div class="prata">0</div>
                <div class="bronze">0</div>
                <div class="total">0</div>
            </div></div>

            <div class="colocacao">
                <div class="posicao">2</div>
                <div class="bandeira sprite-ui sprite-flags--ARG-LARGE"></div>
                <div class="pais">Argentina</div>
                <div class="sigla">ARG </div>
                <div class="ouro">0</div>
                <div class="prata">0</div>
                <div class="bronze">0</div>
                <div class="total">0</div>
            </div></div>

            <div class="colocacao">
                <div class="posicao">3</div>
                <div class="bandeira sprite-ui sprite-flags--ARU-LARGE"></div>
                <div class="pais">Aruba</div>
                <div class="sigla">ARU </div>
                <div class="ouro">0</div>
                <div class="prata">0</div>
                <div class="bronze">0</div>
                <div class="total">0</div>
            </div>

            <div class="colocacao">
                <div class="posicao">4</div>
                <div class="bandeira sprite-ui sprite-flags--BAH-LARGE"></div>
                <div class="pais">Bahamas</div>
                <div class="sigla">BAH</div>
                <div class="ouro">0</div>
                <div class="prata">0</div>
                <div class="bronze">0</div>
                <div class="total">0</div>
            </div>

            <div class="colocacao">
                <div class="posicao">5</div>
                <div class="bandeira sprite-ui sprite-flags--BAR-LARGE"></div>
                <div class="pais">Barbados</div>
                <div class="sigla">BAR</div>
                <div class="ouro">0</div>
                <div class="prata">0</div>
                <div class="bronze">0</div>
                <div class="total">0</div>
            </div>

sei que posso fazer um array mas como pegaria o atributo interno por exemplo

0
para poder ordenar pela quantidade de medalhas de ouro.
5 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa tarde, João! Como vai?

Vc deseja ordenar os dados antes de apresentar eles na tela? É isso?

Se sim, como é o formato dos dados que vc está manipulando? É um JSON?

Com essas informações será possível te dar uma resposta mais exata que atenda ao seu caso!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por Rafael Novais Amorim
| 229.5k xp | 14 posts

Oi João! Pra acessar e manipular textos dentro das tags HTML você pode usar a propriedade .textContent, por exemplo: 

var medalhaOuro = document.querySelector(".ouro");

console.log(medalhaOuro.textContent);
//imprime o texto da tag, no caso => 0

medalhaOuro.textContent = 5;
//o texto da tag passa a ser 5

Espero ter ajudado, abraço!

por João Carlos Duarte Wisnesky
| 101.8k xp | 7 posts

É pra fomatar antes da pagina carregar. Vou colocar o script chamando no head do html não necessito do JSON. Pegaria o ele mento da própria pagina que no caso pode ser

0
e como o Rafael disse acima pegaria o elemento com document.querySelector(".ouro"); onde ele me retornaria o valor 0 no caso. Queria saber se tem algum jeito pratico de ordenação por valor descendente ?
por Rafael Novais Amorim
| 229.5k xp | 14 posts

Hmm, pra ordenar um array você poderia usar o metodo .sort(), assim:

var medalhas = [25, 95, 4, 17];

medalhas.sort(function(a, b) {
            return a - b;
        });
//aqui o retorno é em ordem crescente, se quiser inverter a ordem basta mudar o return pra "b - a"

No seu caso então, basta atribuir os textos das tags em um array e fazer a ordenação por essa função aí de cima, um comando como medalhas.push(document.querySelector(".ouro").textContent) coloca o texto da tag dentro de um array pra você

solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, João! Como vai?

Basicamente primeiro vc terá que selecionar as divs e criar um array com elas. Isso vc pode fazer numa tacada só dessa forma:

const divs = Array.from(document.querySelectorAll('.colocacao'));

Depois disso, terá que ordená-las assim:

const divsOrdenadas = divs.sort(function(divA, divB) {
     return // sua lógica de comparação entre as divs.
});

A função passada ao método sort() irá iterar por suas divs, duas a duas, comparando-as e ordenando-as segundo o critério de comparação definido por vc como corpo dessa função! Ao final o sort() irá retornar um novo array ordenado!

Feito isso, vc poderá fazer o que desejar com o array divsOrdenadas!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!