data-num=""中的后台返回的数值为什么它只取第一组

Question

今天在做一个新项目页面，需要用到一个评分功能。
后台会返回一个数值，然后前端需要拿到这个数值对其进行处理。
如果后台返回的数值是1，那么前端需要显示1星的图片，
如果后台返回的数值是2，那么前端需要显示2星的图片，
下面是我的做法，但是永远只取第一个div下面的data-num数值，无法做到多个调用显示不同的图片。
不知道怎么写，求帮忙

<div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="3" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>

$(document).ready(function(){
    var   num = parseFloat($('.hotnumber').attr('data-num'));
            if(num>=1&&num<2) {
                $('.setimg').attr('src','/img/hot-01.png')
            } else if (num>=2&&num<3) {
                $('.setimg').attr('src','/img/hot-02.png')
            } else if (num>=3&&num<4) {
                $('.setimg').attr('src','/img/hot-03.png')
            }
});

Answer 1

<div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="3" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
 
    <script>
        $(document).ready(function(){
            $.each($('.hotnumber'),function(index, item){
                const num = $(this).attr('data-num')
                $(this).siblings('.setimg').attr('src','/img/hot-0'+num+'.png')
                console.log(num)
            })
        });

    </script>