隐藏容器不会隐藏内容？

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"无数据显示"后仍然出现.

$(".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.无论是增加一个table围绕tbody,包括tr和td周围div,或删除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>