目标

如果你希望将响应加载到发出请求的元素以外的其他元素中，则可以使用 hx-target 属性，该属性采用 CSS 选择器。回顾我们的 Live Search 示例：

<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup delay:500ms changed"
    hx-target="#search-results"
    placeholder="Search..."
>
<div id="search-results"></div>

你可以看到，搜索结果将被加载到中 div#search-results ，而不是 input 标签中。

扩展 CSS 选择器

hx-target 和大多数采用 CSS 选择器的属性都支持“扩展”CSS 语法：

• 你可以使用this关键字，它表示属性所在的元素 hx-target 是目标
• 最接近的 <CSS selector>语法将找到 与给定的 CSS 选择器匹配的最近的父元素或其自身。（例如：最近的 tr 将定位到离元素最近的表格行）
• 该next <CSS selector>语法将在 DOM 中找到与给定 CSS 选择器匹配的下一个元素。
• 该previous <CSS selector>语法将在 DOM 中查找给定 CSS 选择器的前一个元素。 find <CSS selector>它将找到与给定 CSS 选择器匹配的第一个子元素。（例如：find tr 将定位到第一个子行元素）

此外，CSS 选择器可以包装在 < 和 /> 字符中，以模拟超媒体文本的查询文字语法。

像这样的相对目标对于创建灵活的用户界面很有用，而无需在 DOM 中添加大量id属性。