Populate divs based on some value of div

I have a webpage with multiple divs getting created and populated in forloop (wsgi-python). My javascript is changing only first div and not processing further. How to make it happen on all the divs on the webpage?

https://jsbin.com/taximawino/edit?html,output

Answers


id should be unique , so you can use class instead if multiple elements need to be select, then use data-value attribute instead of value attribute, since it's the proper way to add custom attribute and you can access it using data('value'). Then you can iterate over jQuery selected element using each() and select previous element using prev()

$(document).ready(function() {
  // var mb = $('#state').text();
  $('.state').each(function() {
    var mb = $(this).data('value');
    if (mb == 1) {
      $(this).prev().addClass("circleb");
    } else if (mb == 2) {
      $(this).prev().addClass("circlec");
    }
  });
});
div.circlea {
  background-color: #d0e4fe;
  width: 15px;
  height: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
div.circleb {
  background-color: #66FF99;
  width: 15px;
  height: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
div.circlec {
  background-color: #FFCCCC;
  width: 15px;
  height: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="demo" class="circlea"></div>
  <div class="state" data-value="1"></div>
</div>
<div>
  <div class="demo" class="circlea"></div>
  <div class="state" data-value="2"></div>
</div>

Need Your Help

checking for xml tag element attribute value in oracle clob

oracle11g

I need to identify all records where there is a tag such as &lt;hint name="REAL_TIME_TAGGING" value="TRUE"&gt;.