Question

我希望能够点击“显示更多”＆＃39;按钮并删除课程“隐藏＆＃39;来自＆＃39;新闻项目＆＃39; div，因此，当点击按钮时，还会显示另外5个新闻项目。如何实现我的代码删除隐藏的＆＃39;还有5个新闻项目？

$('.show-more').click(function () {
$('.news-item').removeClass('hidden');
}

Answer 1

使用:lt选择器和:hidden选择器。

$(".news-item:hidden:lt(5)").show()

因此它将获得带有新闻项类的前5个隐藏元素。另外我建议使用show功能。

Answer 2

从来没有做过，但我认为你可以使用jQuery slice函数...搜索所有隐藏的元素并更改类...请注意，使用lt可能会更昂贵，因为它在jquery文档中说页...

我让这个jsfiddle检查出来...... https://jsfiddle.net/vp9fxcc7/

function fnShow()
{
$( ".hiddenC" ).slice( 0,2 ).addClass("showC");
    $( ".hiddenC" ).slice( 0,2).removeClass("hiddenC");
}

Answer 3

基本上你想首先通过类名或id来定位div，检查它是否被隐藏，如果它被隐藏，那么只需使用lt来获取下一个元素数。

这是我的jsFiddle示例：https://jsfiddle.net/zgkj53kd/

HTML

<button type="button" class="display-more">Show more</button>
<div class="divContent">1</div>
<div class="divContent hidden">2</div>
<div class="divContent hidden">3</div>
<div class="divContent hidden">4</div>
<div class="divContent hidden">5</div>
<div class="divContent hidden">6</div>
<div class="divContent hidden">7</div>
<div class="divContent hidden">8</div>
<div class="divContent hidden">9</div>
<div class="divContent hidden">10</div>
<div class="divContent hidden">11</div>

Jquery的

$(function () {
    $('.hidden').hide();

    $('.display-more').on('click', function () {
        $(".divContent:hidden:lt(5)").show()
    });
});

点击按钮后从下5个项目中删除课程？

3 个答案: