UL为什么要制造子弹？

Question

I have the following HTML/Jinja2 code:

<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>    

The above code generates this out put:

When I view the source of this snippet it shows an empty list element:

<li> </li>  

I cannot see why it is doing this, I have tried moving the closing </ul> tag in and outside the if statements, and as in my code above I have tried to put closing </ul> tags before I end the if statements:

</ul>
{% endif  %}

What am I missing? Why is it behaving like this?

Update:

So I have changed my code a little bit:

{% 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 %}

I have discovered that it was my if-statement that was causing the problem. The stray bullet is no longer there.

Answer 1

Use a markup validator (on the generated HTML not the template).

You can't have a div element as a child of a ul or the parent of an li . It is likely causing generated extra list items due to error recovery.

You also appear to have ul and li elements as siblings, which is also impossible in HTML.

Answer 2

Unbalanced ul . you have a li just after the /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" %}

Also, div inside a ul ?