Question

我在同一页面上有两个出价的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元素。

Answer 1

您可以使用jquery

尝试此操作

现场演示

http://jsfiddle.net/LhVcc/

Answer 2

然后使用$('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>');
    }
});

FIDDLE

Javascript - 在同一页面上使用两个独立的UL项目显示和隐藏大量列表项的最快方法

2 个答案: