javascript - 隐藏容器不会隐藏里面的内容？

Question

谁能告诉我为什么

$(".transaction_history_tab").hide();

不会隐藏两者

// Container
<tbody class="transaction_history_tab">
</tbody>

// In example this is inside the transaction_history_tab container
<div class="data-info-box">
   <span>NO DATA TO SHOW</span>
</div>

隐藏 transaction_history_tab 后，“NO DATA TO SHOW”仍然出现。

$(".transaction_history_tab").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

// Without table tags around
<tbody class="transaction_history_tab">
  <div class="data-info-box">
    <span>NO DATA TO SHOW</span>
  </div>
</tbody>

使用来自 Rory 的答案

$(".transaction_history_tab").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// With table tags around
<table>
  <thead>
    <tr>
      <td></td>
    </tr>
  </thead>
  <tbody class="transaction_history_tab">
    <tr> 
      <td>
        <div class="data-info-box">
          <span>NO DATA TO SHOW</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

此问题完全是由无效的 HTML 引起的。 tbody 元素必须包含在 table 中。因为你的不是，所以它没有呈现。如果您在检查器中检查 DOM，就可以看到这一点。 tbody 也只能包含 tr 元素。因此，子 div 也是一个问题，它应该被包裹在 tr 中，然后是 td。

由于 tbody 元素未呈现，并且 .transaction_history_tab 不存在，因此没有什么可隐藏的。

要解决此问题，请更正您的 HTML。在 tbody 周围添加一个 table，在 div 周围添加一个 tr 和 td >，或完全删除 tbody。

$(".transaction_history_tab").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <td>This will be shown...</td>
    </tr>
  </thead>
  <tbody class="transaction_history_tab">
    <tr>
      <td>
        <div class="data-info-box">
          <span>NO DATA TO SHOW</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>