Скрыть все элементы, которые появляются после n-го элемента

Question

После того, как найден 4-й элемент <a>, как бы я .hide() остальное? Ниже приведен код, который я написал до сих пор:

<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> 

Любые идеи?

Answer 1

Используйте :gt(index) селектор:

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

Или быстрее slice функция:

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

Live DEMO

Поскольку : GT() является расширение JQuery и не является частью спецификации CSS, запросы с использованием: GT() не может воспользоваться прирост производительности, предоставляемой родной DOM querySelectorAll (). Для лучшей производительности в современных браузерах вместо этого используйте $ («ваш-чистый-css-селектор»). Slice (index).

Answer 2

Как все просто:

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

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

Answer 3

CSS решение

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

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