动态调整课程，使文本适合小方块

好的，我在一个小盒子里面有一个数字，虽然输出是动态的，但它足够可预知，知道在这个盒子中可能不会超过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>

页面上会显示多个框，因此它需要能够运行所有这些框。有没有办法做这样的事情？

请提出问题。谢谢。

来源

2011-09-18 nkcmr

<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>

来源

2011-09-18 18:57:32

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

来源

2011-09-18 18:55:33

如何获得'innerHTML'的长度？ – nkcmr

在特定的div上，你可以有'document.getElementById（'mydiv'）。innerHTML.length' –

如果你想给它的文本长度加个班等于任何元素与num类，你可以这样做：

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

我的添加类的名称，因为类名称前添加n串不应该以数字开头

来源

2011-09-18 19:05:03 Mohsen

动态调整课程，使文本适合小方块

回答

相关问题