1

我想知道是否有人有这样做的聪明方法：

我有一些动态生成的 html，它会根据数据库生成一些 div。

<div class="category_items">
    <div class="category_item"></div>
    <div class="category_item"></div>
    <div class="category_item"></div>          
</div>

如果这个数字 > 3，我需要隐藏那些额外的。当用户单击一个按钮时，它会显示那些被隐藏的按钮，然后如果用户再次单击，它们将再次消失。

这是我当前的 js 代码，它查找哪些 div 有很多孩子（它有效）：

    // Checks the number of items pr. category, if > 3, hide the rest of them
    var categories = $categoriesDiv.children();

    for (var i = 0; i < categories.length; ++i) {
        var localCategoryItems = $('.category_items', categories[i]);

        // Hide elements if length is > 3
        if (localCategoryItems.children().length > 3) {
            console.log('hide');
        }
    }

我只需要一个聪明的方法来隐藏和显示多余的孩子。谢谢！

4

6 回答 6

6

您可以使用:gt()过滤器来找出索引> 2的孩子

localCategoryItems.children(':gt(2)').hide()
于 2013-06-05T10:37:18.203 回答
6

您可以这样使用伪选择器 nth-child：

.category_items div:nth-child(n+4) 
{
    display: none;
}

此处提供示例：http: //jsfiddle.net/AK4c2/1/

更新：链接已更新，jQuery 可能如下：

$(".showhide").click(function()
{
     $(".category_items div:nth-child(n+4)").toggle();
});
于 2013-06-05T10:39:36.950 回答
2

试试喜欢

 $('.category_item:gt(2)').hide();

gt(2) 将表示大于 2 。它将隐藏大于 3 的类别项，因为该计数将从 '0' 开始

于 2013-06-05T10:39:26.573 回答
1

要隐藏.category_items具有 3 个以上子类的元素，并切换这些元素的可见性，您可以执行以下操作：

var elems = $('.category_item', '.category_items').filter(function() {
                return $(this).children().length > 3;
            }).hide();

$('button').on('click', function() {
    elems.toggle();
});

小提琴

于 2013-06-05T10:41:35.257 回答
0

只需用一个类标记“额外”项目并在点击处理程序中切换这些项目的可见性：

for (var i = 0; i < categories.length; ++i) {
   var localCategoryItems = $('.category_items', categories[i]);

   // Hide elements if length is > 3
   if (localCategoryItems.children().length > 3) {
      localCategoryItems.find(':gt(2)').addClass('extra');
   }
}

$('#showHideButton').click(function(e) {
    $('.category_items.extra').toggle();
});
于 2013-06-05T10:42:45.307 回答
0

添加到@Wallack 回答部分以更改切换时的显示/隐藏文本。

$(".showhide").click(function () {
    $(".category_items div:nth-child(n+4)").toggle(function () {
        if ($(this).is(":hidden")) {
            $(".showhide").text("Show more");
        } else {
            $(".showhide").text("Show less");
        }
    });
});
于 2020-11-17T16:02:03.450 回答