82686


タイトルの通りです。

[thymeleafでdivの閉じタグが出力されない](https://ja.stackoverflow.com/questions/82377/thymeleaf%e3%81%a7div%e3%81%ae%e9%96%89%e3%81%98%e3%82%bf%e3%82%b0%e3%81%8c%e5%87%ba%e5%8a%9b%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84)

こちらの質問に付随するものですが、  
解決策が得られなかったのでスコープを狭めて再度質問を作成しました。

th:ifで開始タグはAの制御で表示非表示を制御、  
th:ifで閉じタグはBの制御で表示非表示を制御といった様な事は可能なのでしょうか？

[code]

    <!doctype html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{layout/component :: head('配属情報一覧')}"/>
    <body>
    <th:block th:replace="~{layout/component :: header}"></th:block>
    <div class="container">
        <th:block th:replace="~{layout/component :: container_top('配属情報一覧')}"></th:block>
        <div class="row justify-content-start">
            <div class="w-100 m-2">
                <form method="post" th:action="@{/haizokuMaster/list}" th:object="${haizokuMasterListForm}">
                <table class="table-bordered w-100">
                    <tr>
                        <td class="p-2 text-center">
                            <label class="m-0">支店</label>
                        </td>
                        <td class="p-2">
                            <select class="w-100" name="shitenid">
                                <option th:each="entity : ${optionMapList}" th:value="${entity.key}" th:text="${entity.value}" th:field="*{shitenid}"></option>
                            </select>
                        </td>
                        <td class="p-2 text-center">
                            <label class="m-0">名前</label>
                        </td>
                        <td class="p-2">
                            <input class="w-100" type="text" name="koinname" th:value="${haizokuMasterListForm.koinname}">
                        </td>
                        <td class="p-2 text-center ">
                            <input type="submit" value="検索" class="btn btn-outline-secondary">
                        </td>
                    </tr>
                </table>
                </form>
            </div>
            <div class="w-100 m-2">
                <!-- ページング -->
                <form method="post" th:action="@{/haizokuMaster/pagenate}" th:object="${page}">
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li th:if="${!page.first}" class="page-item">
                      <a th:href="@{/haizokuMaster/pagenate(page = ${page.number} - 1)}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">Previous</span>
                      </a>
                    </li>
                    <li th:each="i : ${#numbers.sequence(0, page.totalPages - 1)}" class="page-item">
                        <a th:if="${i} == ${page.number}" th:text="${i + 1}" class="page-link"><span th:text="${i+1}">1</span></a>
                        <a th:if="${i} != ${page.number}" th:href="@{/haizokuMaster/pagenate(page = ${i})}" class="page-link"><span th:text="${i+1}">1</span></a>
                    </li>
                    <li th:if="${!page.last}" class="page-item">
                      <a th:href="@{/haizokuMaster/pagenate(page = (${page.number} + 1))}" class="page-link" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                </form>
                <!-- ページング -->
            </div>
            <th:block th:each="entity:${list}">
                <th:content th:if="${!#strings.isEmpty(entity.shitenname)}">
                <div style="border: solid;">
                <p th:text="${entity.shitenname}"></p>
                <p th:text="${entity.totalPrice}"></p>
                <p th:text="${entity.countKeiyaku}"></p>
                <p th:text="${entity.shitenRank}"></p>
                </th:content>
                    <div class="card mb-3 mr-1" style="max-width: 375px;">
                      <div class="row no-gutters">
                        <div class="col-lg-6">
                          <img th:src="${entity.filedataString}" class="card-img" alt="...">
                        </div>
                        <div class="col-lg-6">
                          <div class="card-body">
                            <h4 class="card-title">
                                <a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.koinname}">
                                </a>
                            </h4>
                            <p class="card-text"><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.yakushokuname}"></a></p>
                          </div>
                        </div>
                      </div>
                    </div>
                <th:content th:if="${entity.nextShitenIdSameFlg == 1}">
                <p>test</p>
                </div>
                </th:content>
            </th:block>
    <!--        <table class="table table-striped table-sm">
                <tr>
                  <th>支店名</th>
                  <th>年齢</th>
                  <th>名前</th>
                  <th>役職</th>
                </tr>
                <tr th:each="entity:${list}">
                  <td><a th:href="@{'/shitenMaster/detail?id=' + ${entity.shitenmaster.id}}" th:text="${entity.shitenmaster.shitenname}">name</a></td>
                  <td><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.age}">name</a></td>
                  <td><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.koinname}">name</a></td>
                  <td><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.yakushokuname}">name</a></td>
                </tr>
            </table> -->
            <div class="w-100 m-2">
                <!-- ページング -->
                <form method="post" th:action="@{/haizokuMaster/pagenate}" th:object="${page}">
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li th:if="${!page.first}" class="page-item">
                      <a th:href="@{/haizokuMaster/pagenate(page = ${page.number} - 1)}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">Previous</span>
                      </a>
                    </li>
                    <li th:each="i : ${#numbers.sequence(0, page.totalPages - 1)}" class="page-item">
                        <a th:if="${i} == ${page.number}" th:text="${i + 1}" class="page-link"><span th:text="${i+1}">1</span></a>
                        <a th:if="${i} != ${page.number}" th:href="@{/haizokuMaster/pagenate(page = ${i})}" class="page-link"><span th:text="${i+1}">1</span></a>
                    </li>
                    <li th:if="${!page.last}" class="page-item">
                      <a th:href="@{/haizokuMaster/pagenate(page = (${page.number} + 1))}" class="page-link" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                </form>
                <!-- ページング -->
            </div>
            <a href="/" class="btn btn-outline-secondary">戻る</a>
        </div>
    </div>
    <footer th:replace="~{layout/component :: footer}"></footer>
    </body>
    </html>
    
[/code]

コード内61行目のdivの開始タグはth:if="${!#strings.isEmpty(entity.shitenname)}"で制御、  
コード内86行目のdivの閉じタグはth:if="${entity.nextShitenIdSameFlg == 1}"で制御したいです。

現状Eclipse内では62行目で「終了タグ () がありません。」と警告が出ており、  
閉じタグが見つけられていない（？）ようです。

そもそもThymeleafの記述方法としてこのやり方は可能なのか不可能なのか？  
また、不可能なのであれば代替策が分かる方がおられましたら、  
ご回答よろしくお願いします。


CC BY-SA 4.0
2021-09-25T05:20:41.480
82678
2021-09-26T02:46:37.273
44420
question
spring thymeleaf
th:ifで開始タグと閉じタグそれぞれ別の制御を行う事はできますか？


> そもそもThymeleafの記述方法としてこのやり方は可能なのか不可能なのか？

状況によっては可能なようです。  
<https://arakan-pgm-ai.hatenablog.com/entry/2017/03/20/093138>  
によると

> HTML5だとタグを閉じなくてもOKですが、Thymeleaf2.1.x（2.1系）では、それがエラーになります。  
>  Thymeleafが3.0.0以降なら、HTML5の文法で問題なくいけます。

とのことでした。  
<https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html#thymeleaf%E3%81%AF%E3%81%A9%E3%82%93%E3%81%AA%E7%A8%AE%E9%A1%9E%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E5%87%A6%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%AE>  
によると

> Legacy HTML5 以外は整形式XMLです。Legacy HTML5
> モードでは閉じていないタグ・値がない属性・引用符で囲まれていない属性が許容されていますが、Thymeleafはこのモードのファイルを最初に整形式XMLに変換します。それでもHTML5としては正しい状態です(そして実際こちらがHTML5を書くのに推奨されている方法です)。

とのことでした。質問のHTML、実行環境で`閉じていないタグ・値がない属性・引用符で囲まれていない属性`が許容されるかはわかりませんが、状況によっては可能なようです。

* * *

終了タグのない開始タグに、Thymeleafパース時にはコメントとなる終了タグを、同様に開始タグのない終了タグを補うと、発生しているエラーは出なくなると思います。

[code]

    <th:content th:if="True">
        <div>
            AAAAAAAAAAA
            <!--/*--> </div> <!--*/-->
    </th:content>
    XXXXXX
    <th:content th:if="True">
        <!--/*--> <div> <!--*/-->
            BBBBBBBBBBB
        </div>
    </th:content>
    
[/code]

* * *

Thymeleafの良さのひとつはテンプレートをそのままHTMLとして確認できることだと思います。  
できるだけ整合のとれたHTMLにした方がよいと思います。  
冗長になりかねませんが、条件が真のときのHTMLと偽のときのHTMLを両方記述するのがいいと考えます。


CC BY-SA 4.0
2021-09-26T02:46:37.273
82686
2021-09-26T02:46:37.273
35558
82678
answer