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>
I actually fixed it myself. I just used the $('[title]').each(function(){}); to iterate over each span created and toggle the class. pretty easy find.
{% 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>