javascript - 使用 each() 遍历多个 ul 并隐藏任何大于 8 的子 li

Question

需要一些帮助来了解如何使用 ul.children 类遍历所有 ul 元素并隐藏 ul.child 下大于 8 的任何子元素。

我的代码示例如下：

$(function() {
$('ul.children').each(function() {
    var $ul = $(this);
    if($ul.children().length > 8) {
        $ul.hide();
    } 
});
});

我的html代码示例：

<ul class="children>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>hide all other li elements below this point</li>
</ul>

<ul class="children>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>hide all other li elements below this point</li>
</ul>

Answer 1

$("ul.children").find("li:gt(7)").hide();

演示：http: //jsfiddle.net/7TtKD/

---

或者@Vitaliy Petrychuk在评论中建议的另一个解决方案：

$(".children > li:nth-child(n+9)").hide();

Answer 2

使用 index() 和 toggle() ：

$(function() {
    $('ul.children li').each(function(i,ele) {
        $(ele).toggle($(ele).index() > 7);
    });
});

Answer 3

您可以使用gt()过滤索引大于 8 的元素。

现场演示

$(function () {
    $('ul.children').each(function () {        
        $('li:gt(8)', this).hide();        
    });
});

Answer 4

您可以简单地使用filter()方法：

http://jsfiddle.net/HZ3LE/

$('ul.children li').filter(function(i){return i>7}).hide();