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();

DEMO： 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的元素。

<强> Live demo

$(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();

使用each（）迭代多个ul并隐藏任何大于8的子li

4 个答案: