使用 Jquery 将 div 与相同计数器链接

Question

我有一个使用 PHP 从数据库获取数据的表。

该表包含父级 2 个元素，假设它们是：

Name    Surname    << table row id = info1

Name    Surname    << table row id = info2

在每一行下面，还有默认隐藏的另一行。单击名字时，这就是我希望它显示的方式：

Name    Surname    << table row id = info1
DOB     City       << table row id = infoSub1

Name    Surname    << table row id = info2
                   << table row id = infoSub2 NOT DISPLAYED

如何以最有效的方式实现这一点？

谢谢

Answer 1

$("#info1").click(function() {
    $(this).children("#infoSub1").slideDown();
});

然后对 info2 和 infoSub2 执行相同的操作:)

Answer 2

如果您可以为父行指定一个类（例如 parent），那么您可以使用 .nextUntil()：

$("tr.parent").click(function() {
  $(this).nextUntil(".parent").toggle();
});

这仅选择所有元素，不是 .parent 跟随单击的行，直到找到该行。这允许您在中间插入任意数量的非父行，并且可以正确切换它们。如果您有一个包含很多行的长表，请使用 .delegate() 以类似的方式：

$("#tableID").delegate("tr.parent", "click", function() {
  $(this).nextUntil(".parent").toggle();
});

其行为相同，但会将一个事件处理程序附加到 （而不是每个父级 ）。