1

DB から 100 行をロードし、80 の lasts 要素にクラス名 "noShow" (display:none) を追加するフォームを作成しています。

クリックしたときにさらに 20 個の要素を表示するボタンを作成しました。

オンロードすると、20 個の display:block と 80 個の display:none; が得られました。

私は実際に検出をループしてクラスを削除しようとしていますが、うまくいかないようです。

$('#afficher_plus_sanair').bind('click', function()
{
    for ( var i = 0; i < 20; i++ ) 
    {
        $(this).parent().parent().find('table tbody tr.noShow').first().removeClass('noShow').show();
    }



});

ご覧のとおり、.first() を使用しましたが、「1 つずつ」要素に対して正しく機能していました。

$('#afficher_plus_sanair').bind('click', function()
{

        $(this).parent().parent().find('table tbody tr.noShow').first().removeClass('noShow').show();


});

次の 20 を取得するにはどうすればよいでしょうか。もう一度クリックすると、スクリプトは元の場所に戻りますか?

HTML

<table class="table table-striped table-bordered table-hover">
..
<tbody>
<tr >
<td>20</td>
</tr>

<tr style='display:none;' class='noShow'>                                                  
<td>21</td>   
</tr>
</tobdy>
</table>
4

3 に答える 3

1

あなたはこれを行うことができます：

$('#afficher_plus_sanair').bind('click', function () {
    $(this).parent().parent().find('table tbody tr.noShow').nextAll(':lt(20)').removeClass('noShow').show();
});

.nextAll()クラスを持つテーブル行の次のすべての兄弟を提供しますnoShow。

:lt(20)20 未満のインデックスを持つ 20 個の要素を除外します。

于 2013-11-04T06:41:00.863 に答える
1

ワーキングデモ

これを試して

クラスを使用する必要はありません。隠し要素を取得できます。これにより、クラスの追加と削除が回避され、正確な要素も取得できます。以下はコードです

 $("#button").click(function () {
        $(".table-striped tr:hidden").slice($(".table-striped tr:hidden").first().index(),20).show();
    });

これが役に立てば幸いです、ありがとう

于 2013-11-04T07:23:41.320 に答える
0

あなたが試着することができslice()ますnextAll():

たとえば、現在の要素から次の 20 個の要素が必要な場合は、次を試すことができます。

var nextTwenty = $(this).nextAll().slice(0,20);

これを試して：

$(this).parent().parent().find('table tbody tr.noShow').first().nextAll().slice(0,20);
于 2013-11-04T06:40:32.720 に答える