Ocultar todos los elementos que vienen después del enésimo elemento

Question

Después de que se encuentre el 4 ° elemento <a>, ¿cómo puedo .hide() el resto? Debajo está el código que he escrito hasta ahora:

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
    $(document).ready(function() { 
     if($('a').length >= 4) { 
      window.alert('4 or more'); 
     } 
    }); 
</script> 

<a>test </a><br> 
<a>fed </a><br> 
<a>fdes </a><br> 
<a>grr </a><br> 
<a>rerf </a><br> 
<a>dferf </a> 

¿Alguna idea?

Answer 1

Uso :gt(index) selector:

$('a:gt(3)').hide(); 

o la función más rápido slice:

$('a').slice(4).hide(); 

Live DEMO

Debido : GT() es una extensión de jQuery y no forma parte de la especificación CSS, consultas usando: GT() no puede aprovechar el aumento de rendimiento proporcionado por el nativo DOM querySelectorAll () método. Para un mejor rendimiento en los navegadores modernos, use $ ("su-pure-css-selector"). Slice (index) en su lugar.

Answer 2

Tan simple como eso:

$("a:gt(3)").hide(); 

DEMO:http://jsfiddle.net/gmrvK/

Answer 3

solución CSS

ul li:nth-child(n+5) { 
    display: none 
} 

http://jsfiddle.net/mckanet/Sp6yE/