I have a for loop that goes through a list of inspections. I’d like to manipulate the things inside the tag depending on different situations. For test, I tried to using jquery to print out the id of the element as it iterates, but the forloop seems to be stuck at 0. when I put inside the html it will iterate, but when I put inside the attribute ‘id’, it will not iterate. based on the code below, it should iterate as many times as there is i in inspections. but it wont. I also tried to get a console.log() fo the innerHTML of my but all I get is the first item repeated over and over instead of going down the list (on the webage however it looks lile it iterated ok, just not on the backend I guess?).
note that jquery was imported at the beginning of the html. this is just snippet of issue.
I’d appreciate any help.
my code:
<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>