hx-target

Значение

this

Выбрать сам элемент.

<a hx-post="/new-link" hx-target="this" hx-swap="outerHTML">
  New link
</a>

Ссылка обновляет себя при нажатии.

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

Используйте любой расширенный селектор, чтобы выбрать элементы:

• CSS-селекторы: #results, .container, [data-target]
• closest <selector> — ближайший предок (или сам элемент), соответствующий селектору
• find <selector> — первый дочерний потомок, соответствующий селектору
• findAll <selector> — все дочерние элементы-потомки, соответствующие селектору
• next — следующий элемент-сосед
• next <selector> — поиск вперёд по селектору
• previous — предыдущий элемент-сосед
• previous <selector> — поиск назад по селектору

См. полное руководство по расширенным селекторам.

Распространённые шаблоны

Выбрать определённый элемент

<button hx-post="/register" hx-target="#response-div">
  Register
</button>
<div id="response-div"></div>

Обновить родительский контейнер

<div class="card">
  <button hx-get="/refresh" hx-target="closest .card">
    Refresh Card
  </button>
</div>

Обновить соседний элемент

<button hx-get="/data" hx-target="next .results">Load</button>
<div class="results"></div>

Обновить дочерний элемент

<div hx-get="/user" hx-target="find .status">
  <span class="status">Loading...</span>
</div>

См. также

• HX-Target
• HX-Retarget