根据div的一些值填充div [英] Populate divs based on some value of div

问题描述

我有一个网页，其中有多个div被创建并填充到forloop(wsgi-python)中.我的javascript仅更改了first div，并且未进行进一步处理.如何使其在网页上的所有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，输出

推荐答案

id应该是唯一的，因此如果需要选择多个元素，则可以使用class，然后使用data-value属性而不是属性，因为这是添加自定义属性的正确方法，您可以使用 data('value') .然后，您可以使用 each() 遍历jQuery选定的元素，然后选择上一个元素使用 prev()

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>

这篇关于根据div的一些值填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！