Заполнять divs на основе некоторого значения div

Question

У меня есть веб-страница с несколькими div, которые создаются и заполняются в forloop (wsgi-python). Мой javascript меняет только первый div и не обрабатывает его дальше. Как это сделать на всех div на веб-странице?

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

Answer 1

id должен быть уникальным, так что вы можете использовать class вместо этого, если несколько элементов должны быть выбраны, а затем использовать data-value атрибут вместо value атрибута, так как это правильный способ добавить пользовательский атрибут, и вы можете получить доступ к используя data('value'). После этого вы можете перебрать JQuery выбранного элемента с помощью each() и выберите предыдущий элемент, используя 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>