Question

我有以下HTML/Jinja2代码：

<div class="controls" id="pos">{% if context.job_history %} {% for k in context.job_history %} {% for v in k %} {% if v == "job_title" %}
    <div class='job'>
            <h3>{{ k[v] }}</h3>

        <input name='job_title[]' type='hidden' class='form-control' value='{{ k[v] }}' />
        <ul class='control-group list-inline'>{% endif %} {% if v == "from_" %}
            <li>
                <input name='from[]' type='hidden' class='form-control' style='width:130px' value='{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}' />{{ k[v]|replace("00:00:00", "")|replace("-", "/") }} &nbsp;&ndash;</li>{% endif %} {% if v == "current_position" %}
            <li>{{ k[v]==True and "Present" or "" }}</li>
        </ul>{% elif v == "to_" %}
        <li>
            <input name='to[]' type='hidden' style='width:130px' class='form-control' value='{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}' />{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}</li>
        </ul>{% endif %} {% if v == "industries" %}
        <ul class="nav nav-pills">
            <div align='center'>{% for industry in k[v] %}
                <li>    <a>{{ industry }}</a>

                </li>{% endfor %}
                <input type="hidden" value="{{ k[v]|join(" , ") }}" class="form-control" name="industries[]">
            </div>
        </ul>{% endif %} {% endfor %}
        <br />  <a href='#' class='delete btn btn-danger btn-xs'>Remove</a>

    </div>{% endfor %} {% endif %}</div>

上面的代码生成了这个输出：

generated HTML snippet

当我查看此代码段的来源时，它会显示一个空的列表元素：

<li> </li>

我无法理解为什么会这样做，我尝试在if语句之内和之外移动结束</ul>标记，并且在上面的代码中我尝试将</ul>标记关闭我结束了if语句：

</ul>
{% endif  %}

我错过了什么？为什么会这样？

更新

所以我稍微更改了我的代码：

{% if context.job_history %}
{% for k in  context.job_history %}
{% for v in  k %}
<div class='job'>
    {% if v == "job_title"  %}
        <h3>{{ k[v] }}</h3>
        <input name='job_title[]' type='hidden' class='form-control' value='{{ k[v] }}' />
    {% endif %}
    {% if v == "from_" %}
        <input name='from[]' type='hidden' class='form-control' style='width:130px' value='{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}' />
    {% endif %}
    {% if v == "current_position" %}
        <input name='present[]' type='hidden' class='form-control' value='{{ k[v] }}' />
    {% endif %}
    {% if v == "to_" %}
        <input name='to[]' type='hidden' style='width:130px' class='form-control' value='{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}' />
    {% endif %}
    {% if v == "industries" %}
        <input type="hidden" value="{{ k[v]|join(",") }}" class="form-control" name="industries[]">
    {% endif %}
    {% if v == "from_" %}
        <ul class='control-group list-inline'>
        <li>
        {{ k[v]|replace("00:00:00", "")|replace("-", "/") }}
                                        &nbsp;&ndash;
        </li>
        {% if v == "current_position" %}
        <li>
            {{ k[v]==True and "Present" or "" }}

        </li>
        {% elif v == "to_" %}
        <li>
            {{ k[v]|replace("00:00:00", "")|replace("-", "/") }}

        </li>
        {% endif  %}

        </ul>
    {% endif  %}

    {% if v == "industries" %}
    <ul class="nav nav-pills">
        {% for industry in k[v] %}
        <li style="display: inline-block">
             <a>{{ industry }}</a>
        </li>
        {% endfor %}
    </ul>
    {% endif %}
{% endfor %}
<br />
<a href='#' class='delete btn btn-danger btn-xs'>Remove</a>
</div>
{% endfor %}
{% endif %}

我发现导致问题的是我的if-statement。流弹不再存在。

Answer 1

使用markup validator（在生成的HTML而非模板上）。

您不能将div元素作为ul的子级或li的父级。由于错误恢复，可能会导致生成额外的列表项。

您似乎也有ul和li个元素作为兄弟姐妹，这在HTML中也是不可能的。

Answer 2

不平衡ul。您在li后面有一个/ul？

</ul>{% elif v == "to_" %}
<li> 
    <input name='to[]' type='hidden' style='width:130px' class='form-control' value='{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}' />{{ k[v]|replace("00:00:00", "")|replace("-", "/") }}</li>
</ul>{% endif %} {% if v == "industries" %}

另外，div内的ul？

为什么UL制造子弹？

2 个答案: