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>

Answer 2

如果你想将一个等于它的文本长度的类添加到num类的任何元素，你可以这样做：

   $('.num').each(function(){
                    $(this).addClass(
                             'n'+
                             $(this).text().length.toString()
                     )
   });

我在添加类名之前添加了n字符串，因为类名不应以数字

开头

Answer 3

您可以将div的innerHTML作为字符串，计算其长度并将其添加为类。您需要执行"" + len之类的操作才能将该数字转换为字符串。

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

3 个答案: