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

次のように疑似セレクタ 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

3 つ以上の子を持つクラスの要素を非表示にし.category_items、それらの要素の可視性を切り替えるには、次のようにします。

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 に答える