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

Question

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

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

如果全部显示，我希望文本显示为“...更少的选择”。如果我显示的很少，我希望文本显示为“... 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>

'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