我的django模板中的forloop.counter0在原始for循环下不起作用

Question

我有一个for循环，它遍历检查列表。我想根据不同的情况来处理标签中的内容。为了测试，我尝试使用jquery在元素迭代时打印出元素的id，但forloop似乎停留在0。当我放入html时，它会迭代，但当我放入属性"id"时，它不会迭代。根据下面的代码，它应该迭代与检查中的i一样多的次数。但它不会。我也试着在我的innerHTML中获得一个console.log((，但我得到的只是第一个项目反复重复，而不是列表中的下一个项目(在网页上，它看起来很小，但它迭代得还可以，只是我想不是在后端？(。请注意，jquery是在html的开头导入的。这只是问题的一小部分。

如果有任何帮助，我将不胜感激。

我的代码：

<div class="tab-pane fade" id="nav-inspection" role="tabpanel"
aria-labelledby="nav-inspection-tab">
<div class="container"></br></br>
{% for i in inspections %}
<div class="card - mb-3" style="width: 40 rem;">
<div class="card-body">
<h3 class="card-title">{{i.Title}} - <span title="" id="s{{forloop.counter0}}">{{i.Condition}}</span>
</h3>
<script type="text/javascript">
console.log(document.querySelector('[title]').innerHTML);
$(document).ready(function(){
alert($('[title]').attr("id"));
});
</script>
<p>{{i.Desc}}</p>
<h4><span class="badge badge-primary">{{i.Cost}}</span></h4>
</div>
</div>
{% endfor %}
</div>
</div>

Answer 1

实际上是我自己解决的。我只是使用$('[title]').each(function(){});来迭代创建的每个跨度并切换类。很容易找到。

{% for i in inspections.all %}
<div class="card - mb-3" style="width: 40 rem;">
<div class="card-body">
<h3 class="card-title">{{i.Title}} - <span title="inspection" id="s{{forloop.counter0}}" class="">{{i.Condition}}</span>
</h3>
<p>{{i.Desc}}</p>
<h4><span class="badge badge-primary">{{i.Cost}}</span></h4>
</div>
</div>
{% endfor %}
<script type="text/javascript">
$(document).ready(function(){
$("[title='inspection']").each(function(){
if ($(this).html() == 'Poor'){
$(this).toggleClass("badge badge-danger");
} else if ($(this).html() == 'Not Satisfactory') {
$(this).toggleClass("badge badge-warning");
} else if ($(this).html() == 'Satisfactory'){
$(this).toggleClass("badge badge-success");
}else if ($(this).html() == 'Not Inspected'){
$(this).toggleClass("badge badge-secondary");
}
});
});
</script>