如何通過類名的第一部分選擇最接近的元素？

Question

我有桌子的這部分

<tr class="getmoreinfo_19">
    <td>&nbsp;</td>
    <td colspan="3">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
             <i class="far fa-window-close getmoreinfo_x"></i>txt
        </div>
    </td>
</tr>

現在，我想單擊"<i class="far fa-window-close getmoreinfo_x"></i>"圖標將其隱藏。

為此，我想切換display:none類。

我的問題是，我不知道如何選擇以“ getmoreinfo_”開頭的類名為最接近的“ tr”？

有可能嗎？

非常感謝。

Answer 1

如果您使用的是javascript，請嘗試.closest('tr[class^="getmoreinfo_"]') ，

請注意，這是假設的點擊目標是<i>和tr元素始終具有唯一的類getmoreinfo_ 開頭 。 如果您的tr有更多的類，請考慮使用此方法：

.closest('tr[class*="getmoreinfo_"]')

<table>
  <tr class="getmoreinfo_1" data-row="1">
    <td>
      <div class="item"><span></span><i class="icon-x">X</i></div>
    </td>
  </tr>
  <tr class="getmoreinfo_1" data-row="2">
    <td>
      <div class="item"><span></span><i class="icon-x">X</i></div>
    </td>
  </tr>
  <tr class="getmoreinfo_1" data-row="3">
    <td>
      <div class="item"><span></span><i class="icon-x">X</i></div>
    </td>
  </tr>
</table>

(function(){
  const icons = document.querySelectorAll('.icon-x');

  function clickHandler(event) {
    const row = event.currentTarget.closest('tr[class*="getmoreinfo_"]');
    console.log(`clicked: ${row.getAttribute('data-row')}`)
  }

  for(const icon of icons) {
    icon.addEventListener('click', clickHandler);
  }
})();

希望這個幫助