Question

好的我找不到答案......我希望能得到帮助......

如果元素超出X个孩子，我想隐藏50％的元素或隐藏。

<ul>
  <li>
    <div></div>
    <div></div>
    <div></div>
   </li>
<ul>

如果此列表中有超过3个div - 隐藏它们。

Answer 1

您可以通过编程方式获取子项并决定在代码中运行哪些项目：

function hideChildrenAbove(n) {
    var items = $("#list li").children();
    for (i = n; i < items.length; i++) {
        items.eq(i).hide();
    }
}


hideChildrenAbove(3);

工作示例：http://jsfiddle.net/jfriend00/SmVfA/

或者您可以使用:gt(n)动态构建选择器字符串并让选择器完成工作：

function hideChildrenAbove(n) {
    $("#list li div:gt(" + (n - 1) + ")").hide();
}

hideChildrenAbove(3);

工作示例：http://jsfiddle.net/jfriend00/pAdqn/

这是一个示例，点击这些孩子会导致任何超过3的孩子切换：

function toggleChildrenAbove(parent, n) {
    var items = $(parent).children();
    for (i = n; i < items.length; i++) {
        items.eq(i).toggle();
    }
}


$("#list li").click(function() {
    toggleChildrenAbove(this, 3);
});

工作示例：http://jsfiddle.net/jfriend00/9nQPL/

Answer 2

<强>的CSS：

ul li div{
   display:none;
}

<强> JavaScript的：

$('ul li div:lt(3)').show();

这使用'小于'的JQuery选择器。可能有一种更简洁的方法，但如果你知道你只想显示前3个div，那么这应该有用。

http://api.jquery.com/lt-selector/

Answer 3

首先，你需要计算元素。在这种情况下会是。

var elementCount = $("li").children("div").length;

然后你隐藏

$("li").children("div").css("display", "none");

如果您可以在标签中添加ID

，那就太棒了

jquery我如何隐藏50％的元素？

3 个答案: