jquery - 动态调整类以使文本适合小框

Question

好吧，我在一个小盒子里放了一个数字，虽然输出是动态的，但它是可以预测的，知道这个盒子里很可能不会超过 5 个字符。我想要做的是，有一个 jQuery 脚本来计算框中的字符数并将数字作为类添加到框中。像这样:

<div class="num">2443</div>

$('.num').addClass(numOfChars); 
// numOfChars will be different for each, but will be detected

脚本完成后，框将如下所示:

<div class="num 4">2443</div>

如果盒子里有 5 个字符，它看起来像这样:

<div class="num 5">12556</div>

页面上会出现多个框，因此它需要能够针对所有框运行。有什么方法可以做这样的事情吗？

请提问。谢谢。

Answer 1

<script type="text/javascript">

$(document).ready(function() {
  $('.num').each(function() {
    var l = $(this).html().length;
    $(this).addClass('size' + l);
  });
});

</script>
<style type="text/css">
  .num { border: solid 1px red; }
  .size4 { width: 100px; }
  .size5 { width: 200px; }
</style>

<div class="num">2443</div>
<div class="num">12556</div>