时间戳

首页 > 解决方案 > 如何通过类名的第一部分选择最接近的元素？

javascript - 如何通过类名的第一部分选择最接近的元素？

问题描述

我有一张桌子的这一部分

<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类。

我的问题是，我不知道如何选择最接近的“tr”，其类名以“getmoreinfo_”开头？

是否有可能，如果它如何？

非常感谢。

标签： javascripthtml

解决方案

如果您使用的是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);
  }
})();

希望这有帮助

推荐阅读