使用javascript（或jquery）隱藏第一個最近的父元素-有解無憂

我想在單擊按鈕時隱藏一個 html 類。

html結構是這樣的：

<thead>
  <tr class="employee-list">
     <th>
         <button class="show-emp">Show Employee</button>
     </th>
  </tr>
</thead>
<tbody class="emp">
   <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 1</td>
   </tr>
   <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 2</td>
   </tr>
</tbody>
<tbody class="emp">
   <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 1</td>
   </tr>
   <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 2</td>
   </tr>
</tbody>

我也可以擁有多個 .emp 課程。

我已經嘗試過類似下面的代碼，但仍然無法正常作業（它隱藏了所有帶有.emp類的元素）

$('.show-emp').click(function() {
   $(this).closest(".emp").hide();
});

它的作業原理是這樣的：使用javascript（或jquery）隱藏第一個最近的父元素

單擊按鈕時show，它只會隱藏/顯示其下方的員工串列。

uj5u.com熱心網友回復：

.closest()找到與選擇器匹配但.emp不是.show-emp.

您想上到thead，然后在它之后找到與選擇器匹配的第一個兄弟。

.nextAll()將找到以下所有匹配的兄弟姐妹。用于.first()獲取第一個。

$('.show-emp').click(function() {
  $(this).closest("thead").nextAll(".emp").first().toggle();
  $(this).text(function(i, text) {
    return text == 'Show Employee' ? 'Hide Employee' : 'Show Employee';
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr class="employee-list">
      <th>
        <button class="show-emp">Hide Employee</button>
      </th>
    </tr>
  </thead>
  <tbody class="emp">
    <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 1</td>
    </tr>
    <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 2</td>
    </tr>
  </tbody>
  <tbody class="emp">
    <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 3</td>
    </tr>
    <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 4</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

首先正確地糾正你的標記和jquery。

檢查你的<button標簽
jQuery代碼在這里('.show-emp')

您可以通過多種方式實作它。以下方式之一。

$('.show-emp').click(function() {
   $(this).parents().siblings('.emp').first().hide();
   
   // to hide only first sibling then use //first()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
  <tr class="employee-list">
     <th>
         <button class="show-emp"> Btn </button>
     </th>
  </tr>
</thead>
<tbody class="emp">
   <tr class="employee-list">
      <th style="width: 300px" class="text-center">Employee 1</th>
   </tr>
   <tr class="employee-list-last">
      <th style="width: 300px" class="text-center">Employee 2</th>
   </tr>
</tbody>
</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480793.html

標籤：javascript html jQuery

上一篇：如何在einsum中使用標量乘法？

下一篇：在AJAX承諾完成之前阻止點擊