Jquery, ocultar y lista Mostrar artículos después del artículo enésima

Question

Decir que tengo una lista desordenada, así:

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

¿Cómo podría, usando jQuery, ocultar los 2 últimos elementos de la lista y tienen un 'mostrar más' enlace allí, así que cuando se hace clic en, aparecerán los 2 últimos elementos de la lista?

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li style="display:none;">Four</li> 
    <li style="display:none;">Five</li> 
    <li>Show More</li> 
</ul> 

Answer 1

Prueba el ejemplo de código siguiente:

$('ul li:gt(3)').hide(); 
$('.show_button').click(function() { 
    $('ul li:gt(3)').show(); 
}); 

Answer 2

Estoy asumiendo que usted está comenzando con la UL como por su código de ejemplo.

Me gustaría encontrar la UL y ocultar elementos mayores que el índice del último artículo que le gustaría mostrar inicialmente. Luego, agregaría un nuevo elemento para que actúe como un gancho para mostrar el resto. Finalmente, escondería la opción mostrar más ya que ya no era necesaria.

ver lo siguiente:

$('ul li:gt(3)') 
.hide() 
.parent() 
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>'); 

Answer 3

Para la diversión, aquí está una manera indirecta de hacerlo en una cadena:

$('ul') 
    .find('li:gt(3)') 
    .hide() 
    .end() 
    .append(
    $('<li>Show More...</li>').click(function(){ 
     $(this).siblings(':hidden').show().end().remove(); 
    }) 
); 

Answer 4

sería más como este. Tendría que ocultar los hijos mayores de 2, porque Three está indexado como 2. Además, si desea poner Show More en una etiqueta LI, deberá incluir :not(:last-child) en su selector. De este modo:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li><a href=# class=show>Show More</a></li> 
</ul> 
<script>$("li:gt(2):not(:last-child)").hide(); 
$('.show').click(function(){ 
$("li:gt(2)").show(); 
}); 
</script> 

Answer 5

yo sólo quería mostrar la "mostrar/ocultar" si es mayor que max, así que hice esto, siguiendo Ken:

$('ul').each(function(){ 
    var max = 6 
    if ($(this).find("li").length > max) { 
    $(this) 
     .find('li:gt('+max+')') 
     .hide() 
     .end() 
     .append(
     $('<li>More...</li>').click(function(){ 
      $(this).siblings(':hidden').show().end().remove(); 
     }) 
    ); 
    } 
}); 

Answer 6

Después de Ken y Cloud, añadí provisión para el botón "Más" para pasar a "Menos" y alternar los elementos de la lista relevantes.

$('.nav_accordian').each(function(){ 
    var max = 6 
    if ($(this).find('li').length > max) { 
     $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>'); 
     $('.sub_accordian').click(function(){ 
      $(this).siblings(':gt('+max+')').toggle(); 
      if ($('.show_more').length) { 
       $(this).html('<span class="show_less">(see less)</span>'); 
      } else { 
       $(this).html('<span class="show_more">(see more)</span>'); 
      }; 
     }); 
    }; 
}); 

Answer 7

Puedes probar el Show First N Items jQuery Plugin. Todo lo que necesita para escribir es la siguiente:

<ul class="show-first" data-show-first-count="3"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

Se convertirá automáticamente a este:

<ul class="show-first" data-show-first-count="3"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li><a href="#" class="show-first-control">Show More</a></li> 
    <li style="display: none;">Four</li> 
    <li style="display: none;">Five</li> 
</ul> 

Y después de hacer clic Mostrar Más, convertirá a esta:

<ul class="show-first" data-show-first-count="3"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li> 
    <li style="display: list-item;">Four</li> 
    <li style="display: list-item;">Five</li> 
</ul> 

FYI, Contribuí el código a este complemento.