Question

假设我想获得这样的结构：

import geocoder
g = 'GOOGLE_API_KEY'

for i, row in df.iterrows():
    result = geocoder.google(df, key=g)
    df.set_value(i, 'address', result.address)
    df.set_value(i, 'city', result.city)
    df.set_value(i, 'state', result.state)
    df.set_value(i, 'postal', result.postal)
    df.set_value(i, 'country', result.country)

基本上每个<div> <ul>  <li class="item"> + </li>  <li class="item1 hidden nojs"> <a href="mylink">My link</a> </li> <li class="item1 hidden nojs"> <a href="mylink">My link</a> </li> <li class="item1 hidden nojs"> <a href="mylink">My link</a> </li> </ul> </div>都有[0 ... n] item。

要使用Thymeleaf获得此结构，我首先要定义主要项目如下：

children

但是，由于<li th:each="item : ${items}"> + </li>的范围有限，如何循环显示item？

Answer 1

<li th:each="item : ${items}">
    <span th:each="child : ${item.children}" class="more no-select" th:attr="data-target='.' + ${item.id}">+</span>
</li>

这就是你要找的东西吗？

我看到你更新了你的问题。好的，那么答案是：不，你不能这样做，而你不应该这样做。 <li>应该包含同类数据。有时html编码器会按照你在表示中获得某些结果的方式来执行它，但它是一个hack而不是语义上正确的，应该避免使用。

您需要重新考虑设计以执行以下操作：

    <li th:each="item : ${items}">
        <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span>
        <span th:each="child : ${item.children}" class="some class" th:attr="data-target='.' + ${item.id}">child related things</span>
    </li>

然后应该由css管理表示。

Hacky方式 我要慢一点...... 我不认为这是一种方法，但在评论中你提到Thymeleaf是唯一一个不能做到这一点对我来说似乎不太酷的引擎:) 虽然我投反对票，但您可以查看th:block并使用它： http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#synthetic-thblock-tag实际上可以实现这一点（未经测试，请亲自尝试）：

<th:block th:each="item : ${items}">
    <li th:text="item1">
          <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span>
    </li>
    <li th:each="child : ${item.children}">
        <span class="more no-select" th:attr="data-target='.' + ${child.id}">child related things</span>
    </li>
</th:block>

Answer 2

我认为您必须将th:each移到更高级别，以便您还可以在每个li元素之后添加子级。 th:block元素应该很方便，因为它本身不会创建HTML元素，但可以携带任何Thymeleaf属性。

解决方案的大纲应如下：

<th:block th:each="item : ${items}">
    <!-- Item -->
    <li class="item">
        item content ...
    </li>
    <!-- Children -->
    <li th:each="child : ${item.children}" class="item1 hidden nojs">
        child content ...
    </li>
</th:block>

Answer 3

你可以很容易地在百里香中做到这一点。

<th:block th:each="item : ${items}">
    <li>
        <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span>
        <span class="right"></span>
    </li>

    <li th:each="child : ${item.children}" class="item1 hidden nojs">
        <span class="spacing"></span>
        <a href="mylink">My link</a>
    </li>
</th:block>

春天 - Thymeleaf迭代

3 个答案: