jQuery切换在一定数量的匹配元素之后显示/隐藏元素
jQuery切换在一定数量的匹配元素之后显示/隐藏元素
提问于 2010-03-09 18:39:47
在实现分面搜索时，如果选项数为7或更少，我将向他们展示所有选项。如果选项数超过7，我将只显示前5，并插入一个链接，该链接将切换这些选项的显示。
我在本例中的问题是，如何遍历匹配元素的列表(在本例中是属于li的元素)，并执行此功能。其次，我需要在.facet ul的末尾.appendTo() an 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”类在这里是不相关的，并起到了另一个作用。你可以无视它。
Stack Overflow用户
回答已采纳
发布于 2010-03-09 18:55:40
您正在寻找: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);
}
)
);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2411588
复制相关文章
相似问题
腾讯云开发者
