Калі колькасць дзіцяці DIV з'яўляецца> 3, схаваць астатняе

Мне было цікава, калі хтосьці разумны спосаб зрабіць гэта:

У мяне ёсць некаторыя дынамічна згенераваны HTML, і гэта стварае некаторыя дзівы на аснове базы дадзеных.

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

If this number is > 3, I need to hide those extra. When the user clicks a button, its going to show those that were hidden, and then if the user clicks again they will disappear again.

Гэта мой бягучы код JS, які знаходзіць нейкія дзівы, якія маюць шмат дзяцей (ён працуе):

   //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');
        }
    }

Мне проста патрэбен разумны спосаб, каб схаваць і паказаць дадатковыя дзіця. Дзякуй!

1
Вы можаце падзяліцца HTML для categoriesDiv ?
дададзена аўтар Arun P Johny, крыніца
Вы павінны проста выкарыстоўваць CSS і невялікі кавалачак JQuery, каб паказаць/схаваць. Проста «.category_items дзіў: п-й дзіця (п + 4)» селектар будзе рабіць гэта. Выкарыстоўвайце яго на CSS і на JQuery. Прыклад прадугледжана ніжэй.
дададзена аўтар Wallack, крыніца

7 адказы

You can user the :gt() filter to find out children with index > 2

localCategoryItems.children(':gt(2)').hide()
5
дададзена

Вы можаце выкарыстоўваць селектар псеўда п-га дзіцяці такім чынам:

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

Example is provided here: http://jsfiddle.net/AK4c2/1/

UPDATED: the link has been updated and the jQuery could be as follows:

$(".showhide").click(function()
{
     $(".category_items div:nth-child(n+4)").toggle();
});
5
дададзена
Добры, мне падабаецца, дзякуй!
дададзена аўтар ptf, крыніца
Старыя браўзэры могуць не падтрымліваць яго, але ... каму яны патрэбныя !!
дададзена аўтар Wallack, крыніца

Вы можаце выкарыстоўваць селектар псеўда п-га дзіцяці такім чынам:

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

Example is provided here: http://jsfiddle.net/AK4c2/1/

UPDATED: the link has been updated and the jQuery could be as follows:

$(".showhide").click(function()
{
     $(".category_items div:nth-child(n+4)").toggle();
});
5
дададзена
Добры, мне падабаецца, дзякуй!
дададзена аўтар ptf, крыніца
Старыя браўзэры могуць не падтрымліваць яго, але ... каму яны патрэбныя !!
дададзена аўтар Wallack, крыніца

паспрабуйце як

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

GT (2) будзе 2 ўяўляе сабой GreaterThan .Гэта будзе хавае categories_items, што GreaterThan 3 таму, што адлік будзе statr ад «0»

2
дададзена
Ці з'яўляецца мой анс працуе .. ??
дададзена аўтар Gautam3164, крыніца
Ня публікуйце адказ, калі вы не ўпэўненыя, што гэта працуе
дададзена аўтар Elliot Schep, крыніца

Для таго, каб схаваць элементы з класам .category_items , які мае больш чым 3-х дзяцей, а таксама перамыкаць бачнасць гэтых элементаў, вы маглі б зрабіць нешта накшталт:

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

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

<�моцны> FIDDLE

1
дададзена
праверыць jsfiddle.net/AK4c2/3
дададзена аўтар softsdev, крыніца

Проста адзначце «лішнія» элементы з класам і пераключэння бачнасці, што элементы ў апрацоўшчыку пстрычкі:

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();
});
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();
});
0
дададзена