jQuery在一定数量的匹配元素后切换显示/隐藏元素

Question

在实现分面搜索时，如果选项数为 7 或更少，我将全部显示。如果选项数量超过 7 个，我将只显示前 5 个并插入一个链接来切换这些选项的显示。

在这种情况下，我的问题是，如何遍历匹配元素列表，在这种情况下，li 属于.facet ul，并执行此功能。其次，我需要在.facet ul 的末尾加上.appendTo() 和li，它会根据我是显示全部还是部分来显示文本。

如果显示全部，我希望文本显示为“...更少的选择”。如果我显示的内容很少，我希望文本显示为“... n More Choices”。

非常感谢您朝着正确的方向推动每个功能，或者提供完整的解释。

以下代码供参考。

    <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>

'all' 类在这里是无关紧要的，还有另一个目的。随意忽略它。

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