93188


以下のような予算(`class="budget"`)を費用(`class="cost"`)が上回った場合に判定結果(`class="result"`)に「予算オーバー」と表示したいですが上手くいきません。  
ご教授のほどよろしくお願いいたします。

▼HTML

[code]

    <div>
        <div><span class="budget">100</span>　<span class="cost">80</span>　<span class="result"></span></div>
        <div><span class="budget">50</span>　<span class="cost">70</span>　<span class="result"></span></div>
        <div><span class="budget">30</span>　<span class="cost">50</span>　<span class="result"></span></div>
    </div>
    
[/code]

▼試したコード

[code]

    <script>
    var budget = $('.budget').text();
    var cost = $('.cost').text();
    if(budget < cost) {
      $('.result').text('予算オーバー');
    }
    </script>
    
[/code]

▼理想の結果

[code]

    100　80　
    50　70　予算オーバー
    30　50　予算オーバー
    
[/code]

▼現状の結果

[code]

    100　80　予算オーバー
    50　70　予算オーバー
    30　50　予算オーバー
    
[/code]


CC BY-SA 4.0
2023-01-04T09:58:51.640
93182
2023-01-05T01:46:38.583
2023-01-05T01:46:38.583
3060
56379
question
javascript jquery
要素Aの数字より要素Bの数字が小さい場合に、要素Cに判定を出したい


要素は複数あるので、配列に格納して同じインデックスで比較します。

[code]

      <script>
        const budget = $('.budget').map((_, e) => Number(e.innerText)).get();
        const cost = $('.cost').map((_, e) => Number(e.innerText)).get();
        $('.result').each((i, e) => {
            if (budget[i] < cost[i]) {
                e.innerText = '予算オーバー';
            }
        });
      </script>
    
[/code]


CC BY-SA 4.0
2023-01-04T21:36:22.207
93188
2023-01-04T21:36:22.207
47127
93182
answer