Question

我目前正在构建一个页面，它使用一些jquery来显示和隐藏一系列表格和嵌套表格。在页面上，有一个围绕所有数据的主表。在那下面是该表的数据，也被定义为父表（class =“parent”）。父表可以与一个，两个或没有子表相关联（class =“child”; class =“child1”）。

我编写了javascript，以便在加载时隐藏所有子表。如果子表与父表关联，则会有一个[+]符号可以按下以扩展该嵌套表以供用户查看。基本的javascript说如果一行被定义为“父”而下一个tr元素是“子”，则在加载时隐藏该元素。此外，当单击'a'元素（我已设置为[+]）时，这将展开并折叠该子'tr'元素，在这种情况下是嵌套表。此外，只有一个父表可以一次扩展它的子表。以下是此基本功能的jsfiddle：

http://jsfiddle.net/rUgfW/9/

现在我最终需要做的是考虑三种不同的可能性： 1）有一个'tr.parent'元素后跟一个'tr.child'元素（目前在前面的jsfiddle代码中处理）。 2）有一个'tr.parent'元素后跟一个'tr.child1'元素（child1代表一个不同的子表，其数据集不同于'tr.child'）。 3）有一个'tr.child'元素后跟一个'tr.child1'元素（如果'tr.parent'有两种类型的子表与它相关联，那就是这样。）

我创建了javascript代码来隐藏加载时的所有子表，这满足了所有三种已定义的可能性。这是通过添加额外的两个条件来实现的：

$('tr.parent').next('tr.child1').hide();
$('tr.child').next('tr.child1').hide();

我面临的问题是我不确定如何定义$ child变量以包含所有三种可能性。为了显示和隐藏子表，这是必要的。我尝试使用IF测试，但我很确定我的逻辑（可能是我的语法）不正确：

if ('tr.parent').next('tr.child') != null
     {
     $child = $this.closest('tr.parent').next('tr.child');
     }
if ('tr.parent').next('tr.child1') != null
     {
     $child = $this.closest('tr.parent').next('tr.child1');
     }
if ('tr.child').next('tr.child1') != null
     {
     $child = $this.closest('tr.child').next('tr.child1');
     }

这是jsfiddle：

http://jsfiddle.net/rUgfW/16/

正如您所看到的，添加这一系列的IF语句会破坏隐藏加载功能，而根本不起作用。

有没有人对如何满足所有这三项要求有任何建议？（提前致谢）

Answer 1

这里有逗号错误：

var $this = $(this), //not comma here! Should be ";"

也：

if (('tr.parent').next('tr.child') != null) {
    ^ missing a $ here??

还有两件事：

对if语句使用正确的语法：if(statement){code} ()
这永远不会为null $('tr.parent').next('tr.child')，它始终是一个jQuery对象。也许你应该有if($('tr.parent').next('tr.child').length){

<强>建议

$(document).ready(function () {
    $('tr[class^=child]').hide();
    $('a.toggle').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        var nxt = $this.closest('tr.parent').nextAll('tr').each(function(){
            if($(this).hasClass('parent')){return false; }
            $(this).toggle();
        });
    })
});

演示here

Answer 2

我认为你正在寻找

var $parent = $this.closest('tr.parent'),
    $child = $parent.next('tr.child');
if ($child.length == 0) {
    $child = $parent.next('tr.child1');
    if ($child.length == 0) {
        $child = $this.closest('tr.child').next('tr.child1');
    }
}

用于在数据行下显示/隐藏1个或多个嵌套表的JS代码

2 个答案:

演示here