1

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

4

2 回答 2

1

你可以用jquery试试这个

现场演示

http://jsfiddle.net/LhVcc/

于 2012-10-16T09:36:35.663 回答
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>');
    }
}); ​

小提琴

于 2012-10-16T09:32:29.113 回答