web-dev-qa-db-ja.com

jQueryは最初の3つの要素をロードし、「さらに読み込む」をクリックして次の5つの要素を表示します

順不同のリストがあります：

<ul id="myList"></ul>
<div id="loadMore">Load more</div>

このリストに別のHTMLファイルのリストアイテムを追加したいと思います。

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>

最初の3つのリストアイテムをロードし、ユーザーが「さらに読み込む」divをクリックしたときに次の5つのアイテムを表示したい：

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

「もっと読み込む」で次の5つのリストアイテムを表示したいのですが、HTMLファイル内にさらにリストアイテムがある場合は、「もっと読み込む」divを再度表示して、ユーザーに次のリストを表示できるようにするため、サポートが必要です。リスト全体が表示されるまでこれを繰り返す5項目。

どうすればこれを最もよく達成できますか？

私は次のjsfiddleを作成しました： http://jsfiddle.net/nFd7C/

jqueryloadhtml-lists
16
JV10

警告：size()はjQuery 1.8で廃止され、jQuery 3.0で削除されました。代わりに.lengthを使用してください

作業デモ： http://jsfiddle.net/cse_tushar/6FzSb/

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});


新しいJSにより、負荷をより多く表示または非表示にして、より少なく表​​示

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

[〜＃〜] css [〜＃〜]

#showLess {
    color:red;
    cursor:pointer;
    display:none;
}

作業デモ： http://jsfiddle.net/cse_tushar/6FzSb/2/

46
Tushar Gupta - curioustushar

シンプルでほとんど変更はありません。また、リスト全体が読み込まれると、[もっと読み込む]が非表示になります。

jsFiddle ここ 。

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#showLess').hide();
    var items =  25;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#myList li:visible').size()+5;
        if(shown< items) {$('#myList li:lt('+shown+')').show();}
        else {$('#myList li:lt('+items+')').show();
             $('#loadMore').hide();
             }
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});
14
Optimus Prime

式$（document）.ready（function（）はjQuery3で非推奨になりました。

jQuery 3ここ

見苦しいボタンは含めなかったことを考慮に入れてください。

コードは次のとおりです。

[〜＃〜] js [〜＃〜]

$(function () {
    x=3;
    $('#myList li').slice(0, 3).show();
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        x = x+5;
        $('#myList li').slice(0, x).slideDown();
    });
});

[〜＃〜] css [〜＃〜]

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
2
Kaiser