Question

这就是我喜欢做的事情。我有一堆有一堆行的表。我只希望显示第一个1，其余的将使用display:none设置样式。 Theres将成为一个链接，当点击时，将删除另外一行的display:none。这是我到目前为止所得到的http://jsfiddle.net/dBdV7/。

问题：

首先，它说没有定义loadmore ..为什么？
如果显示所有行，我如何获得更多链接以消失？
我确定slice是否能够正常工作但是我想要做的是将所选的孩子限制为只有一个。
最后，我手动添加了hide_row类，jquery如何自动将它添加到表onload的所有子项中，除了第一个？

Answer 1

试试这个，您可以使用:not和:first选择器：

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

DEMO

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

DEMO

Answer 2

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

鉴于此标记 -

<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() - 显示行

Fiddle 1

这当然可以最小化到 -

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

Fiddle 2

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

Answer 3

<script>
var current=2;
function loadmore() {
    $('.main_table tr:nth-child('+current+')').show();
    current++;
}
</script>

Answer 4

修改

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

jsFiddle demo

感谢@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(); });

<小时/> 的 BEFORE：

jsFiddle demo

我创建了一个很好的脚本，允许你循环！
这意味着如果在某个时刻你到达最后一个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(); });

Answer 5

首先，您在jQuery(function () { ... });中定义了loadmore函数，这意味着它对onClick事件不可见。我建议使用以下代码，而不是在HTML中使用onClick事件：

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

如果要添加该功能，则使用切片而不是first选择器可以一次显示多行。否则，我会使用first选择器，因为它使其他人明白你想要完成的事情。

只显示1，显示更多onClick？

5 个答案:

jsFiddle demo

jsFiddle demo