隐藏第n个元素后面的所有元素

时间:2012-06-28 22:06:20

标签: jquery html

找到第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>

有什么想法吗?

3 个答案:

答案 0 :(得分:19)

使用:gt(index)选择器:

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

或更快的slice功能:

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

Live DEMO

  

因为:gt()是jQuery扩展而不是CSS规范的一部分,所以使用:gt()的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。 为了在现代浏览器中获得更好的性能,请使用$(“your-pure-css-selector”)。切片(索引)代替。

答案 1 :(得分:14)

CSS解决方案

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

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

答案 2 :(得分:7)

就这么简单:

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

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