模板语法for的问题

Question

遇到一个很奇怪的问题。

<div>
{% for i in list %}
<a>
<span>{{ i.name }}</span>
</a>
{% endfor %}
</div>

以上是伪代码，这样的代码理想情况是

<a>
<span>{{ i.name }}</span>
</a>

<div>
<a>
<span>name1</span>
</a>
<a>
<span>name2</span>
</a>
<a>
<span>name3</span>
</a>
........
</div>

这个结构循环几遍。结果是span标签被循环了，a标签在div标签外循环。

<a></a>
<a></a>
<a></a>
.....
<div>

<span>name1</span>

<span>name2</span>

<span>name3</span>

........
</div>

而且更奇怪的是，右键选择查看源码的话，是正常的结果。然而a标签是没有效果的，使用DevTools才能发现这个情况。

实在google不到
希望老师能帮我解答一下
谢谢

Answer 1

Jack 2019-04-25 09:28:28

应该是html标签哪里用得不对，导致凌乱了，这个不是模板语法报错所以google不到。

我在article_list.html里面试了一下，

<div class="col-md-8">

   <div>
       {% for i in articles %}
           <a>
               <span>{{ i.title }}</span>
           </a>
       {% endfor %}
   </div>

   {% for article in articles %}

结果没啥毛病

你的 <a data-toggle="xx" data-target="yy"></a> ，如果是想实现模态框的话，请参考 http://ijianbian.com/home/post/detail?id=6177169

用<button></button>才对，<a></a>一般用于链接跳转

• 提问者 初学者之一 #1

  我想做一个table 每一行都能点 所以用了a 标签。js我不太会写 只好选择绕一点的方式