Javascript—在同一页面上显示和隐藏大量列表项的最快方式，其中包含两个独立的UL项

我在同一页上有两个bid 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>

清单项目1
清单项目1
清单项目1
清单项目1
清单项目1
清单项目1
清单项目1
清单项目1


清单项目1
清单项目1
清单项目1
清单项目1
清单项目1
清单项目1
清单项目1
清单项目1

这是我一直在使用的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>');
    }

}); 

$（'.setOne'）。每个（函数（）{
var max=2；
if（$（this）.find（'li'）.length>max）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“viewmore”>View moreHide'）；
$（'.viewmore'）。单击（函数（）{
$（this）.this（':gt（'+max+'））.toggle（）.end（）.find（'span'）.toggle（）；
});
}else if（$（this）.find（'li'）。长度===max）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“nomore”>end）；
}else if（$（this）.find（'li'）。长度<最大值）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“nomore”>No Likes）；
}
}); 

我想使用

$（'ul'）

选择所有两个

ul

元素，但它只适用于最后一个

ul

元素

只需使用

$（'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>');
    }
}); ​

$（'ul'）。每个（函数（）{
var max=2；
if（$（this）.children（'li'）.length>max）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“viewmore”>View moreHide'）；
$（'.viewmore'，this）.on（'click'，function（））{
$（this）.this（':gt（'+max+'））.toggle（）.end（）.find（'span'）.toggle（）；
});
}else if（$（this）.find（'li'）。长度==max）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“nomore”>end）；
}else if（$（this）.find（'li'）。长度<最大值）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“nomore”>No Likes）；
}
}); ​

只需使用

$（'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>');
    }
}); ​

$（'ul'）。每个（函数（）{
var max=2；
if（$（this）.children（'li'）.length>max）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“viewmore”>View moreHide'）；
$（'.viewmore'，this）.on（'click'，function（））{
$（this）.this（':gt（'+max+'））.toggle（）.end（）.find（'span'）.toggle（）；
});
}else if（$（this）.find（'li'）。长度==max）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“nomore”>end）；
}else if（$（this）.find（'li'）。长度<最大值）{
$（this.find（'li:gt（'+max+'））.hide（）.end（）.append（'li class=“nomore”>No Likes）；
}
}); ​

---

您可以用jquery试试这个

现场演示

---

您可以用jquery试试这个

现场演示

---

您想使用

$（'ul'）

-然后使用它。我只能看到

$（'.setOne'）

您想要使用

$（'ul'）

-然后使用它。我只能看到

$（'.setOne'）

Hey adeneo，谢谢你的更正，但是我对第二个“else-if”语句仍然有一个小问题。由于只有3个列表项，“显示更多”显示出来，但有3个列表项意味着

max=2

。哦，不！对于三个列表项，您有三个元素，这超过了最大值，即两个，因此当然会显示“show more”？嘿，adeneo，感谢您的更正，但我对第二个“else if”语句仍然有一个小问题。由于只有3个列表项，“显示更多”显示出来，但有3个列表项意味着

max=2

。哦，不！对于三个列表项，您有三个元素，这超过了最大值，即2，那么当然会显示“show more”了？