方法 - htmx.closest()

htmx.closest(selector, startingElement) 是一个 HTMX 提供的实用函数，功能类似原生的 Element.closest()，但可以处理一些额外的情况，比如跨 shadow DOM。

它用于从指定元素（startingElement）开始，向上查找最近的匹配 selector 的父级元素。

语法

htmx.closest(selector, startingElement);

• selector：CSS 选择器；

• startingElement：起始查找的元素；

• 返回值：找到的最近祖先元素，或 null（未找到）；

参数

• elt - 要根据选择器查找的元素
• selector - 要查找的选择器

示例：查找最近的 .card 元素

<div class="card">
  <div class="info">
    <button onclick="highlightCard(this)">点击我</button>
  </div>
</div>

<script>
  function highlightCard(btn) {
    const card = htmx.closest('.card', btn);
    if (card) {
      card.style.border = '2px solid red';
    }
  }
</script>

与原生 element.closest() 的区别

特点	element.closest()	htmx.closest()
原生支持	是	否（HTMX 提供）
可穿透 shadow DOM	否	是（HTMX 可以跨 DOM 层级）
使用方式	el.closest('form')	htmx.closest('form', el)