DEMO

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

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

3 个答案:

DEMO