JQuery переключить показать / скрыть элементы после определенного количества соответствующих элементов

Question

При реализации граненого поиска, если количество опций равно 7 или меньше, я покажу их все. Если число параметров превышает 7, я покажу только первые 5 и вставлю ссылку, которая будет переключать отображение этих параметров.

Мой вопрос в этом случае заключается в том, как просмотреть список подходящих элементов, в данном случае li, которые попадают в .facet ul, и выполнить эту функцию. Во-вторых, мне нужно .appendTo() и li в конце .facet ul, который отображает текст в зависимости от того, показываю я все или некоторые.

Если отображается все, я хочу, чтобы текст читался как "... Меньше вариантов". Если я показываю немного, я бы хотел, чтобы текст читался как "... n Больше вариантов".

Очень важен толчок в правильном направлении для каждой из этих функций или полное объяснение.

Код ниже для справки.

    <div class="facet">
  <h4>Brands</h4>
  <ul>
   <li><a class="all" href="#">Really long brand name facet to show what happens with multi-line facets <em>(63)</em></a></li>
   <li><a class="all" href="#">Joe Rocket <em>(57)</em></a></li>
   <li><a class="all" href="#">Icon <em>(42)</em></a></li>
   <li><a class="all" href="#">Fieldsheer <em>(37)</em></a></li>
   <li><a class="all" href="#">Tour Master <em>(21)</em></a></li>
   <li><a class="all" href="#">AGV Sport<em>(21)</em></a></li>
   <li><a class="all" href="#">Alpinestars<em>(21)</em></a></li>
   <li><a class="all" href="#">Cortech<em>(21)</em></a></li>
   <li><a class="all" href="#">Element<em>(21)</em></a></li>
   <li><a class="all" href="#">Fieldsheer<em>(21)</em></a></li>
   <li><a class="all" href="#">Firstgear<em>(21)</em></a></li>
   <li><a class="all" href="#">FMF Apparel<em>(21)</em></a></li>
   <li><a class="all" href="#">Icon<em>(21)</em></a></li>
   <li><a class="all" href="#">Joe Rocket<em>(21)</em></a></li>
   <li><a class="all" href="#">O'Neal Racing<em>(21)</em></a></li>
   <li><a class="all" href="#">Power Trip<em>(21)</em></a></li>
   <li><a class="all" href="#">REV'IT!<em>(21)</em></a></li>
   <li><a class="all" href="#">River Road<em>(21)</em></a></li>
   <li><a class="all" href="#">Rockstar<em>(21)</em></a></li>
   <li><a class="all" href="#">Scorpion<em>(21)</em></a></li>
   <li><a class="all" href="#">Shift Racing<em>(21)</em></a></li>
   <li><a class="all" href="#">Speed and Strength<em>(21)</em></a></li>
   <li><a class="all" href="#">Spidi<em>(21)</em></a></li>
   <li><a class="all" href="#">Teknic<em>(21)</em></a></li>
   <li><a class="all" href="#">Tour Master<em>(21)</em></a></li>
   <li><a class="all" href="#">Troy Lee Designs<em>(21)</em></a></li>
   <li><a class="all" href="#">Vega<em>(21)</em></a></li>
   <li><a class="all" href="#">Yoshimura<em>(21)</em></a></li>
   <li><a class="all" href="#">Z1R<em>(21)</em></a></li>
  </ul>
 </div>

Класс «все» здесь не имеет значения и служит другой цели. Не стесняйтесь игнорировать это.

Answer 1

Вы ищите селектор :gt:

$('.facet').each(function() {
    var ul = $('ul', this);
    if(ul.children('li').size() <= 7) return;

    var hiddenElements = ul.children('li:gt(4)', this).hide();

    var showCaption = '...' + hiddenElements.size() + ' More Choices';
    ul.append(
        $('<li class="toggler">' + showCaption + '</li>')
            .toggle(
                function() { 
                    hiddenElements.show();
                    $(this).text('...Fewer Choices');
                }, 
                function() { 
                    hiddenElements.hide();
                    $(this).text(showCaption);
                }
            )
    );
});

DEMO

Answer 2

Вот начало:

$(document).ready(
  function(){

    var count=0;
    $('div.facet ul li').each(
      function(){
        if(++count == 7){
          $(this).parent().append('<li><a href="">Click here for more...</a></li>');
        }
        else if(count > 7){
          $(this).css('display','none');
        }
      }
    );

  }
);

Answer 3

два моих цента

$('.facet li').each(function(x) {
    var warn = ''
    if($('.facet li').length > 7){
        if (x >= 5){
            $(this).hide(); 
        }
        warn = '.. Fewer Choices';
    }else{
        $(this).show(); 
        warn = 'test to append if less than 7 than seven';
    }
    if ($('#warn').length == 0){
                    $('.facet ul').append('<li id="warn"></li>');
    }
    $('#warn').text(warn);
});