jQuery在特定数量的匹配元素之后切换显示/隐藏元素 [英] jQuery toggle show/hide elements after certain number of matching elements

问题描述

在实施多面搜索时，如果选项数量为7个或更少，则将全部显示.如果选项数量超过7个，我将仅显示前5个，并插入一个链接，以切换这些选项的显示.

In implementing faceted search, if the number of options is 7 or less, I will show them all. If the number of options exceed 7, I will show the first 5 only and insert a link that will toggle the display of these options.

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

My question in this case is, how to run through the list of matching elements, in this case li's that fall within .facet ul, and perform this function. Secondly, I need to .appendTo() an li at the end of .facet ul that displays text based on whether or not I am showing all or some.

如果全部显示，我希望文本显示为"...更少的选择".如果我显示的很少，我希望文本显示为"... n 更多选择".

If showing all, I want the text to read "... Fewer Choices". If I am showing few I would like the text to read "... n More Choices".

为这些功能中的每一个功能按正确的方向进行推送，或者对其进行完整的解释，都非常感谢.

A push in the right direction for each of these functions, or a complete explanation is much appreciated.

下面的代码可供参考.

    <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"类在这里是无关紧要的，它有另一个目的.随意忽略它.

The 'all' class is irrelevant here and serves another purpose. Feel free to disregard it.

推荐答案

您正在寻找 :gt 选择器:

You're looking for the :gt selector:

$('.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);
                }
            )
    );
});

这篇关于jQuery在特定数量的匹配元素之后切换显示/隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！