hx-select-oob

hx-select-oob 属性を使用すると、バンド外の入れ替え経由でスワップされるレスポンスからコンテンツを選択できます。
この属性の値は、バンド外でスワップされる要素のコンマ区切りリストです。この属性は、hx-select とペアでほとんどの場合使用されます。

次の例は、レスポンスコンテンツのサブセットを選択します

<div>
   <div id="alert"></div>
    <button hx-get="/info" 
            hx-select="#info-details" 
            hx-swap="outerHTML"
            hx-select-oob="#alert">
        Get Info!
    </button>
</div>

このボタンは、GET を /info に発行し、次に id info-details の要素を選択します。これは DOM のボタン全体を置き換え、さらに、レスポンスから id alert の要素を取り出して、DOM 内の同じ ID の div と入れ替えます。

コンマ区切り値リスト内の各値は、セレクターとスワップ戦略を : で区切ることで、有効な hx-swap 戦略を指定できます。

たとえば、アラートコンテンツを置き換える代わりに前置する場合は、次のようになります

<div>
   <div id="alert"></div>
    <button hx-get="/info"
            hx-select="#info-details"
            hx-swap="outerHTML"
            hx-select-oob="#alert:afterbegin">
        Get Info!
    </button>
</div>

注意事項