動態調整課程，使文本適合小方塊

好的，我在一個小盒子裏面有一個數字，雖然輸出是動態的，但它足夠可預知，知道在這個盒子中可能不會超過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

動態調整課程，使文本適合小方塊

回答

相關問題