jQuery 円周上に配置した要素を加工したい

質問

jQuery 円周上に配置した要素を加工したい

ここに円周上に等間隔に要素を配置するコードがあります。
これを下記の要件を満たすためには、どんなコードにしたらよいですか？

＜要件＞
・基準点を赤丸で表示させる
・時計の文字盤のような数字の配置にする（真上がゼロ）
・円内の文字が上下左右とも、中央に来るようにする
・数字は赤丸を天にした向きに表示させる

<script src='https://code.jquery.com/jquery-3.7.0.min.js'></script>

<style>
.main-board {
position: relative;
width: 300px;
}
.circle-box {

}
div.item {
position: absolute;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #0dd;
}
</style>

<section class="main-board">
<section class="circle-box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</section>

<script>
$(function(){

var item_num = $('div.item').length;
var deg = 360.0 / item_num;
var red = (deg * Math.PI / 180.0);
var circle_r = $("div.item").width() * 2.5;

$('div.item').each(function(i, elem) {
var x = Math.cos(red * i) * circle_r + circle_r;
var y = Math.sin(red * i) * circle_r + circle_r;
$(elem).css('left', x);
$(elem).css('top', y);
$(elem).text(i);
});

});
</script>

回答No.2

babu_baboo

map を forEach にするとかに、くふうすれば？

回答No.1

babu_baboo

div.item {
...
text-align: center;
line-height: 40px;
}

document.querySelectorAll('.item').map((A,B,_,C=B*Math.PI/6,D=Math.cos(C),E=Math.sin(C))=>(A.style.transform=`matrix(${-D},${-E},${E},${-D},${E*100+100},${100-D*100})`,A.textContent=B))

補足

試させていただきました。
下記のようなエラーが出ました。
Uncaught TypeError: document.querySelectorAll(...).map is not a function