3

Uso o append para criar a numeração:

$("#navigation").append("<li class='waves-effect' id='page_" + (i + 1) + "'>" + "<a>" + (i + 1) + "</a></li>");

a seguir tenho css especificas para cada numero da paginação:

        $("#page_1").addClass('at')
        $("#page_2").addClass('at')
        $("#page_3").addClass('at')
        $("#page_4").addClass('ap')
        $("#page_5").addClass('ap')
        $("#page_6").addClass('ts')
        $("#page_7").addClass('tc')

Alguem sabe como tornar isto mais dinamico com o mesmo funcionamento? Como selecciono #page_1, #page_2 etc...? Agradeço

1
  • Qual é o critério para determinar as classes?
    – lfarroco
    Commented 4/10/2016 às 11:21

2 Respostas 2

3

Se for para tornar mais dinâmico com o mesmo funcionamento você pode pode criar um objeto com a chave = id pagina e valor classe da página e percorrer um for criando os li. e depois realizar a inserção.

Além de manter o controle apenas no objeto você ganha mais desempenho por não estar atualizando o DOM toda vez que usa o append.

var page = {
  1: "at",
  2: "at",
  3: "at",
  4: "ap",
  5: "ap",
  6: "ts",
  7: "tc"
};

var li = "";
var max = Object.keys(page).length;

for (i = 1; i <= max; i++) {
  li += "<li  class='waves-effect " + page[i] + "' id=page_" + i + ">" + i + "</li>";
}

$('#navigation').append(li);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
  <ul id="navigation">

  </ul>
</nav>

2

Você pode passar por todos os elementos retornados por uma query com .each(), veja como:

$('.waves-effect').each(function(){ //passa por todos os elementos com 'waves-effect'

    //$(this) vai corresponder ao elemento atual

    var n;
    var targetClass;

    n = $(this).attr('id').replace('page_',''); //pegamos o número dentro da id
    n = parseInt(n); //convertemos de string para número

    //aqui você pode implementar a lógica de definição das classes
    if(n <= 3)
        targetClass = 'at'
    else if(n> 3 && n < 5)
        targetClass = 'ap'
    else if(n == 6)
        targetClass = 'ts'
    else
        targetClass = 'tc'


    $(this).addClass( targetClass );

});

Ainda assim a lógica ficou um pouco grande, para resolver isso é melhor ver se é possível simplificar a distribuição de classes.

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 .