2

Tenho uma div com uma ul e dentro 30 li. Dentro dessa li tem uma img.

Quero que quando tenha uma nova li, no caso a número 31, ele crie uma paginação, deixando essa nova li dentro da outra div.

Alguém já fez algo parecido?

O HTML está assim:

<div>
 <ul>
  <li><img.../></li>
  <li><img.../></li>
  <li><img.../></li>
 ...
 </ul>
</div>
2
  • 1
    Você está buscando essas imagens dinamicamente através do banco? Commented 21/08/2014 às 18:40
  • Exatamente, tenho uma função que faz isso. Commented 21/08/2014 às 18:41

2 Respostas 2

2

Você pode usar jQuery para saber quando fechar uma ul e abrir outra:

$(document).ready(function(){
    $("</ul><ul>").insertAfter("li:nth-child(3n+0)");
});

Nesse exemplo eu cortei o a cada 3 li. Você pode mudar o 3 por 30 que funciona da mesma forma.

Com esse código eu insiro o </ul><ul> depois do <li>.

Exemplo no jsFiddle.

UPDATE

Conforme comentários abaixo, a prática acima não é indicada. É mais recomendado fazer segundo este exemplo: http://jsfiddle.net/tgL1r5om/

$(document).ready(function(){
    var container = $('#container');
    var lista = container.find('ul').last();
    $("li").each(function(indice) {
        lista = indice > 0 && indice % 3 == 0 ? $('<ul>').appendTo(container) : lista;
        lista.append(this);
    });
});

Da outra forma o browser renderizava um novo <ul>; agpra a cada 3 <li> uma nova lista é criada.

4
1

Você pode usar o Quick Pagination

Exemplo

<ul class="pagination1"> 
    <li>1 - Item 1 de 25</li> 
    <li>2 - Item 2 de 25</li> 
    <li>3 - Item 3 de 25</li> 
    <li>4 - Item 4 de 25</li> 
    <li>5 - Item 5 de 25</li> 
    <li>6 - Item 6 de 25</li> 
....  

Criando três exemplo de paginação

<script type="text/javascript"> 
$(document).ready(function() { 
    $("ul.pagination1").quickPagination(); 
    $("ul.pagination2").quickPagination({pagerLocation:"both"}); 
    $("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"}); 
}); 
</script>  

Primeiro exemplo Opção padrão mostrando 10 itens da lista e navegação na parte inferior.

$(“ul.pagination1″).quickPagination();

Segundo exemplo Mostrando 10 itens da lista e navegação na parte superior e inferior.

$(“ul.pagination2″).quickPagination({pagerLocation:”both”});

Terceiro Exemplo Especificados 3 itens na lista e navegação na parte superior e inferior.

$(“ul.pagination3″).quickPagination({pagerLocation:”both”,pageSize:”3″});

1
  • Tinha visto esse plugin, porém ele não atendeu 100% a minha necessidade, mas valeu aí :D Commented 21/08/2014 às 20:13

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 .