2

这是 id 喜欢做的事情。我有一张有一堆行的桌子。我只想显示第一个 1，其余的将使用display:none. 将有一个链接，当点击时，将删除display:none一个额外的行。这是我到目前为止得到的http://jsfiddle.net/dBdV7/。

问题：

  1. 首先，它说 loadmore 没有定义..为什么？
  2. 一旦显示所有行，我如何让加载更多链接消失？
  3. 我不确定这是否slice会正常工作，但我试图做的是将所选儿童限制为一个。
  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

这是一个简单的解决方案 -

鉴于此标记 -

​<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();

我将逐个选择器进行选择器，每个级别都指定一个定义，直到我们找到我们正在寻找的元素。

  • $('table tr')- 这些是所有表格行
  • .not(':visible')- 这些都是“隐藏”行
  • .filter(':eq(0)')- 这是第一个结果
  • .show()- 显示行

小提琴 1

这当然可以进一步最小化为 -

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

小提琴 2

这将达到相同的结果 - 但 IMO 有时最好更冗长，以便您的代码变得更具可读性......

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

编辑：

要加载多个tr（两个乘两个或更多...），请在答案下方的我的评论中找到演示。

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 回答
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 回答