Есть HTML документ:
<div class = "room">
<div class = "red box"></div>
<div class="orange box"></div>
<div class="yellow box"></div>
<div class="green box"></div>
<div class="blue box"></div>
<div class="violet box"></div>
</div>
<div class = line></div>
<div class="room">
<div class = "red box"></div>
<div class="orange box"></div>
<div class="yellow box"></div>
<div class="green box"></div>
<div class="blue box"></div>
<div class="violet box"></div>
</div>
CSS: .box {background-color:red; height:30px; width:30px; position:absolute; margin:5px;}
Нужно расставить элементы внутри контейнера с классом "room" по кругу. Для этого я использую следующую функцию:
function drawCircle(selector, center, radius, angle, x, y)
{
var total = $(selector).length;
var alpha = Math.PI * 2 / total;
$(selector).each(function(index)
{
var theta = alpha * index;
var pointx = Math.floor(Math.cos( theta ) * radius);
var pointy = Math.floor(Math.sin( theta ) * radius );
// Выводим координаты X и Y
$(this).css('margin-left', pointx + x + 'px');
$(this).css('margin-top', pointy + y + 'px');
});
};
Но тут получается, что я сразу выбираю все подходящие элементы и они составляют одну общую окружность (для данного HTML в каждой "комнате" будет выстроена полуокружность). Как последовательно расставить элементы в первой "комнате, а затем в последующих? P.S. Количество комнат может от 0 до N.