Ẩn tất cả các phần tử đến sau phần tử thứ n

Question

Sau khi tìm thấy phần tử thứ 4 <a>, tôi sẽ làm cách nào để giữ nguyên phần còn lại? Dưới đây là mã tôi đã viết cho đến thời điểm này:

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

Bất kỳ ý tưởng nào?

Answer 1

Sử dụng :gt(index) selector:

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

Hoặc nhanh hơn slice chức năng:

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

Live DEMO

Vì : gt() là một phần mở rộng jQuery và không một phần của đặc tả CSS, truy vấn sử dụng: gt() không thể tận dụng lợi thế của việc tăng hiệu suất cung cấp bởi nguồn gốc DOM querySelectorAll () phương pháp. Để có hiệu suất tốt hơn trong các trình duyệt hiện đại, hãy sử dụng $ ("your-pure-css-selector"). Slice (index) để thay thế.

Answer 2

Đơn giản như vậy:

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

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

Answer 3

giải pháp CSS

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

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