Javascript Jquery，在第 n 项之后隐藏和显示列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4054211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery, hide & show list items after nth item
提问by Keith Donegan
Say I have an unordered list, like so:
假设我有一个无序列表，如下所示：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
How would I, using JQuery, hide the last 2 list items and have a 'show more' link there, so when clicked upon, the last 2 list items would appear?
我将如何使用 JQuery 隐藏最后 2 个列表项并在那里有一个“显示更多”链接，以便在单击时显示最后 2 个列表项？
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li style="display:none;">Four</li>
<li style="display:none;">Five</li>
<li>Show More</li>
</ul>
回答by pex
Try the following code example:
尝试以下代码示例：
$('ul li:gt(3)').hide();
$('.show_button').click(function() {
$('ul li:gt(3)').show();
});
回答by Ken Redler
For fun, here's a roundabout way to do it in one chain:
为了好玩，这里有一种在一个链中完成它的迂回方式：
$('ul')
.find('li:gt(3)')
.hide()
.end()
.append(
$('<li>Show More...</li>').click( function(){
$(this).siblings(':hidden').show().end().remove();
})
);
回答by CloudMagick
I only wanted to show the "show/hide" if greater than max, so I did this, following Ken:
如果大于最大值，我只想显示“显示/隐藏”，所以我按照 Ken 做了这个：
$('ul').each(function(){
var max = 6
if ($(this).find("li").length > max) {
$(this)
.find('li:gt('+max+')')
.hide()
.end()
.append(
$('<li>More...</li>').click( function(){
$(this).siblings(':hidden').show().end().remove();
})
);
}
});
回答by bozdoz
It would be more like this. You would have to hide the children greater than 2, because Three is indexed as 2. Also, if you wanted to put the Show More in an LI tag, you would need to include :not(:last-child)in your selector. Like so:
会更像这样。您必须隐藏大于 2 的子项，因为三被索引为 2。此外，如果您想将 Show More 放在 LI 标记中，则需要包含:not(:last-child)在您的选择器中。像这样：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a href=# class=show>Show More</a></li>
</ul>
<script>$("li:gt(2):not(:last-child)").hide();
$('.show').click(function(){
$("li:gt(2)").show();
});
</script>
回答by Eric Broder
You can try the Show First N Items jQuery Plugin. All you need to write is this:
你可以试试Show First N Items jQuery Plugin。所有你需要写的是：
<ul class="show-first" data-show-first-count="3">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
It will automatically convert to this:
它将自动转换为：
<ul class="show-first" data-show-first-count="3">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li><a href="#" class="show-first-control">Show More</a></li>
<li style="display: none;">Four</li>
<li style="display: none;">Five</li>
</ul>
And after clicking Show More, it will convert to this:
单击 Show More 后，它将转换为：
<ul class="show-first" data-show-first-count="3">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li style="display: none;"><a href="#" class="show-first-control">Show More</a></li>
<li style="display: list-item;">Four</li>
<li style="display: list-item;">Five</li>
</ul>
Fyi, I contributed code to this plugin.
仅供参考，我为这个插件贡献了代码。
回答by Robert Waddell
Following Ken and Cloud, I added provision for the "More" button to turn to "Less" and toggle the relevant list items.
继 Ken 和 Cloud 之后，我为“更多”按钮添加了设置以转到“更少”并切换相关列表项。
$('.nav_accordian').each(function(){
var max = 6
if ($(this).find('li').length > max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
$('.sub_accordian').click( function(){
$(this).siblings(':gt('+max+')').toggle();
if ( $('.show_more').length ) {
$(this).html('<span class="show_less">(see less)</span>');
} else {
$(this).html('<span class="show_more">(see more)</span>');
};
});
};
});
回答by Brian Scott
I'm assuming that you are starting with the UL as per your example code.
我假设您按照示例代码从 UL 开始。
I would find the UL and hide items greater than the index of the last item you'd like to initially display. Then I would add a new item to act as a hook for displaying the rest. Finally, I'd hide the show more option as it was no longer needed.
我会找到 UL 并隐藏大于您希望最初显示的最后一个项目的索引的项目。然后我将添加一个新项目作为显示其余项目的挂钩。最后，我将隐藏显示更多选项，因为不再需要它。
See the following:
请参阅以下内容：
$('ul li:gt(3)')
.hide()
.parent()
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>');
