如何通过一次请求交换HTMX中的多个元素列表？

核心思路是用容器包裹需要更新的列表项，通过hx-swap-oob="innerHTML"替换目标<ul>的内部内容，这样既保留原<ul>的样式、属性，又能一次性完成多区域更新。

1. 前端按钮无需修改 #

保持原按钮的POST请求逻辑，不需要指定hx-target，因为后端会返回OOB（Out Of Band）内容自动处理更新：

<li>
    <button
        class="px-4 py-2 hover:bg-gray-50"
        hx-post="http://localhost:5556/templates/menu/1/recipes/2"
        hx-trigger="click"
    >
        recette 2
    </button>
</li>

2. 后端返回OOB更新片段 #

在Handlebars模板中，返回两个分别对应#selectedRecipes和#ingredients的容器，每个容器包裹最新的列表项，并通过hx-swap-oob="innerHTML"指定替换目标元素的内部HTML：

<!-- 替换已选食谱列表的内部内容 -->
<div id="selectedRecipes" hx-swap-oob="innerHTML">
    {{#each updatedSelectedRecipes}}
    <li>{{this.name}}</li>
    {{/each}}
</div>

<!-- 替换食材列表的内部内容 -->
<div id="ingredients" hx-swap-oob="innerHTML">
    {{#each updatedIngredients}}
    <li>{{this.name}} ({{this.quantity}})</li>
    {{/each}}
</div>

如果需要同时更新搜索下拉的#allRecipes（比如移除已选中的食谱），可以追加第三个OOB片段：

<!-- 替换搜索下拉列表的内部内容 -->
<div id="allRecipes" hx-swap-oob="innerHTML">
    {{#each remainingRecipes}}
    <li>
        <button class="px-4 py-2 hover:bg-gray-50" hx-post="http://localhost:5556/templates/menu/1/recipes/{{this.id}}">
            {{this.name}}
        </button>
    </li>
    {{/each}}
</div>

3. 为什么这个方案可行 #

• 不会替换原<ul>元素：原<ul>的Tailwind类、peer-placeholder-shown:hidden等属性完全保留，避免了样式复制的技术债务。
• 一次性完成多区域更新：HTMX会自动识别所有带hx-swap-oob的片段，分别对应页面上的目标元素进行内部HTML替换。
• 解决了单个元素替换的问题：用容器包裹所有列表项，一次性替换目标<ul>的内容，不会出现单个<li>依次替换导致仅显示最后一项的问题。

内容的提问来源于stack exchange，提问作者papillon