Целевые элементы

Если вы хотите, чтобы ответ загружался в другой элемент, а не в тот, который сделал запрос, вы можете использовать атрибут hx-target, который принимает CSS-селектор. Вернёмся к примеру с живым поиском:

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

Вы можете видеть, что результаты поиска будут загружены в div#search-results, а не в тег input.

Расширенные CSS-селекторы

hx-target, а также большинство атрибутов, принимающих CSS-селектор, поддерживают «расширенный» синтаксис CSS:

• Вы можете использовать ключевое слово this, которое указывает, что элемент, на котором находится атрибут hx-target, является целевым.
• Синтаксис closest <CSS selector> найдет ближайший родительский элемент или сам элемент, который соответствует заданному CSS-селектору. (Например, closest tr будет нацеливаться на ближайшую строку таблицы к элементу)
• Синтаксис next <CSS selector> найдет следующий элемент в DOM, соответствующий заданному CSS-селектору.
• Синтаксис previous <CSS selector> найдет предыдущий элемент в DOM, соответствующий заданному CSS-селектору.
• find <CSS selector> найдет первый дочерний элемент, который соответствует заданному CSS-селектору. (Например, find tr будет нацеливаться на первую дочернюю строку к элементу)

Кроме того, CSS-селектор может быть обернут в символы < и />, имитируя синтаксис литералов запросов гиперскрипта.

Относительные цели, подобные этим, могут быть полезны для создания гибких пользовательских интерфейсов без необходимости заполнять ваш DOM множеством атрибутов id.