Javascript/Jquery：无法定位表中的兄弟节点答案

【问题标题】：Javascript/Jquery: Cannot target Sibling Node in TableJavascript/Jquery：无法定位表中的兄弟节点
【发布时间】：2012-07-09 05:12:58
【问题描述】：

我有一个函数可以通过单击包含在 thead> 标记中的表头来隐藏/显示表。单击时表格隐藏，只剩下标题，再次单击可以取消隐藏表格。

我有多个表，只想使用 on 函数，而不是为每个表编写一个。为此，我试图传递参数（this，this.lastSibling）。出于某种原因，this.lastSibling 没有针对任何对象。我已经尝试了所有我能想到的导航节点树的方法，但我无法定位 tbody。

我的 Javascript/Jquery

function ToggleTable(trigger,target){
    $(trigger).click(function(){
      $(target).toggle();
      ToggleTable(trigger,target)
    });
}

我的 HTML

<table class="format2" >
    <thead onmouseover="ToggleTable(this,this.lastSibling)">
        <!--Title-->
    </thead>
    <tbody>
        <!--Cells with information in here-->
    </tbody>
    <!--Note No TFooter Tag-->
</table>

<--Other tables similar to the one above-->

提前致谢！

【问题讨论】：

标签： javascript jquery nodes siblings

【解决方案1】：

假设您的所有表格都将具有类 format2 。试试这个：

$("table.format2 > thead").click(function(){
    $(this).next("tbody").toggle();
});

JSFiddle：http://jsfiddle.net/KcY4X/

【讨论】：

不行。它仍然无法定位 tbody> $("table.format2 > thead").click(function(){ $(this).next("tbody").toggle()' });
@AlexiaHurley 修正了错别字。与 JSFiddle 一起检查更新

【解决方案2】：

我有一个函数可以通过单击包含在<thead> 标记中的表头来隐藏/显示表。点击后表格隐藏，只剩下表头，再次点击可以取消隐藏表格。

我迷失在您当前的代码中。但如果你想切换 tbody 的可见性（或<table> 标签中的最后一个子元素，你可以试试这个。

function ready() {

  $('table > thead')
    .each(function(e){
      $(this).siblings(':last').hide();
    })
    .click(function(e) {
      $(this).siblings(':last').toggle();
    });

}

$(ready);

现场样本：http://bl.ocks.org/3078240

【讨论】：

【解决方案3】：

如果您想尝试使用核心 JavaScript 而不是 jQuery 垫片的解决方案，这可能适合您。这是我快速编写的一个函数，它返回作为 HTML 元素的最后一个兄弟元素（例如，不是文本节点），尽管您应该能够轻松修改它以接受 DOM 中的任何节点：

function getLastSibling(el) {
    var siblings, x, sib;

    siblings = el.parentNode.children;
    x = siblings.length;

    while ((sib = siblings[x - 1]) && x >= 0) {
        console.log(sib);
        console.log(sib.nodeType);
        if (sib.nodeType != 1 || sib.tagName == 'SCRIPT') {
            x--;
        } else {
            return sib;
        }
    }

    return null;
}

【讨论】：