2

これがidがやりたいことです。たくさんの行を持つテーブルがあります。最初の 1 のみを表示し、残りはdisplay:none. クリックすると、display:none追加の 1 行のオフが削除されるリンクがあります。ここに私がこれまでに得たものがありますhttp://jsfiddle.net/dBdV7/。

問題:

  1. まず、loadmore が定義されていないと表示されます。なぜですか?
  2. すべての行が表示されたら、さらに読み込むリンクを非表示にするにはどうすればよいですか?
  3. それが適切に機能するかどうかはわかりませんが、私sliceがやろうとしているのは、選択した子を1つだけに制限することです。
  4. そして最後に、私はhide_rowクラスを手動で追加しました.jqueryは、最初のものを除くテーブルonloadのすべての子にどのように自動的に追加できますか?
4

5 に答える 5

3

これを試してみてください。セレクター:notを使用できます：:first

$('tr:not(:first)').addClass('hide_row') // adds the class to all tr elements except the first one

デモ

$('a').click(function(e){
   e.preventDefault()
   $('.hide_row:hidden:first').removeClass('hide_row');
})

デモ

于 2012-07-16T19:53:24.100 に答える
1 
<script>
var current=2;
function loadmore() {
    $('.main_table tr:nth-child('+current+')').show();
    current++;
}
</script>
于 2012-07-16T19:59:58.963 に答える
1

編集：

tr複数（2つずつまたはそれ以上...）ロードするには、回答の下の私のコメントでデモを見つけてください。

jsFiddle デモ

コメントをくれた @Lix に感謝します:次の行を追加/表示するには、この jQuery を使用するだけではありません:

var curr = 0;
var rowN = $('.main_table tr').length;

$('.main_table tr').eq(curr).siblings().hide();  // no need for CSS

$('a.load_more').on('click',function(e){
    e.preventDefault();   
    $('.main_table tr').eq(++curr).show();
});

前：

jsFiddle デモ

ループできる素敵なスクリプトを作成しました。
つまり、ある時点で最後に到達するtrと、最初のものに戻るということです!

HTML:

<table class="main_table">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>.....</td></tr>
</table>

<a class="load_more" href="#">Click to load another row</a>

jQuery:

var curr = 0;                     // set desired starting one (zero based)!
var rowN = $('.main_table tr').length;

$('.main_table tr').eq(curr).siblings().hide(); // hide all but current one

$('a.load_more').on('click',function(e){
    e.preventDefault(); // prevent default anchor behavior

    ++curr;
    if(curr===rowN){curr=0;} // reset to 0 at some point

    $('.main_table tr').eq(curr).show().siblings().hide();
});
于 2012-07-16T20:00:58.533 に答える
1

ここにあなたのための簡単な解決策があります -

このマークアップを考えると -

​&lt;table>
  <tr><td>1</td></tr>
  <tr class="hide"><td>2</td></tr>
  <tr class="hide"><td>3</td></tr>
  <tr class="hide"><td>4</td></tr>
  <tr class="hide"><td>5</td></tr>
  <tr class="hide"><td>6</td></tr>
</table>​​​​​​​​​​

クラスはhide単に定義を持っています{ display : none; }

jQuery のこの行は、毎回別の行を表示します。

$('table tr').not(':visible').filter(':eq(0)').show();

探している要素が見つかるまで、各レベルでもう 1 つの定義を指定します。

  • $('table tr')- これらはすべて表の行です
  • .not(':visible')- これらはすべて「非表示」の行です
  • .filter(':eq(0)')- これが最初の結果です
  • .show()- 行を明らかにします

フィドル 1

もちろん、これはさらに最小化できます-

$('table tr:not(:visible):first').show();

フィドル 2

それは同じ結果を達成します-しかし、IMOはコードをより読みやすくするために、より冗長にする方が良い場合があります...

于 2012-07-16T19:59:19.667 に答える
0

まず、その中で loadmore 関数を定義してjQuery(function () { ... });います。これは、onClick イベントから見えないことを意味します。HTML で onClick イベントを使用する代わりに、次のコードをお勧めします。

$('a').click(function() {
  e.preventDefault();
  $('.main_table').find(".hide_row").slice(0,1).removeClass('hide_row');
});

セレクターの代わりにスライスを使用firstすると、その機能を追加したい場合に、一度に複数の行を表示できます。firstそれ以外の場合は、あなたが達成しようとしていることを他の人に明らかにするので、セレクターを使用します。

于 2012-07-16T19:54:12.917 に答える