如果子DIV是空的，则显示/隐藏表行

Question

我有一个表与多个条目。在每个条目表行之后是一个编辑表行，带有一个跨列单元格，其中有一个动态加载超文本标记语言的DIV。问题是，当呈现这些空表行时，会导致页面上出现大量额外的空白。

我知道我不能直接将HTML动态加载到单元格中，所以我在单元格中有一个DIV，可以将内容加载到其中。

我想在子DIV为空时隐藏任何表行，并在信息被动态加载到子DIV后显示该表行。这个动态加载的信息也可以删除，所以我需要它再次隐藏，一旦它再次是空的。

<table width="100%">
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr style="display: none;">
      <td colspan="3"><div></div></td>
    </tr>
  </tbody>
</table>



$("tr").each(function() {
    if (this.children().filter(":empty").length) {
        this.hide();
    } else {
        this.show();
    }
});

Answer 1

您应该使用$（this）而不是this。

原因是：$（this）是一个JQuery对象，它允许您在上面调用JQuery方法，如。

Answer 2

>

div不是子对象，而是孙子对象，因此children（）无法找到divs。请使用上下文或find。

您正在对DOM元素而不是jQuery元素操作hip和show。你需要先在jQuery中包装它。

因此，每次加载东西时运行此代码：

//find empty divs and hide it's tr
$("div:empty").closest('tr').hide();

//find non-empty divs and show it's tr
$("div:not(:empty)").closest('tr').show();

看，妈妈！没有循环！无每个！：D