我在同一页面上有两个出价的UL元素,我希望每个元素最多显示5个列表项。然后,如果用户希望通过单击由Javascript动态创建的“查看更多”li元素,他们将隐藏其他可以看到的内容。
假设以下这些是我的“ul”元素集。
<ul class="setOne">
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>
<ul class="setTwo">
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>
这是我一直在使用的JS代码;
$('.setOne').each(function(){
var max = 2;
if ($(this).find('li').length > max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="viewmore"><span class="showMore">View more</span><span class="showLess less">Hide</span></li>');
$('.viewmore').click( function(){
$(this).siblings(':gt('+max+')').toggle().end().find('span').toggle();
});
}else if ($(this).find('li').length === max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">End</span></li>');
}else if ($(this).find('li').length < max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">No Likes</span></li>');
}
});
我希望使用ul
选择所有两个$('ul')
元素,但它仅适用于最后一个ul
元素。
答案 0 :(得分:1)
答案 1 :(得分:0)
然后使用$('ul')
选择器,并确保通过添加上下文两次绑定$('.viewmore')
:
$('ul').each(function(){
var max = 2;
if ($(this).children('li').length > max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="viewmore"><span class="showMore">View more</span><span class="showLess less">Hide</span></li>');
$('.viewmore', this).on('click', function(){
$(this).siblings(':gt('+max+')').toggle().end().find('span').toggle();
});
}else if ($(this).find('li').length == max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">End</span></li>');
}else if ($(this).find('li').length < max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="nomore"><span class="End">No Likes</span></li>');
}
});