Question

Okay, I have a number inside a tiny box, although the output is dynamic it is predictable enough to know that there will more than likely be no more than 5 characters in this box. What I want to do is, have a jQuery script that counts the number of characters in the box and adds the number as a class to the box. Like This:

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

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

When the script is finished, the box will look like this:

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

If the box had 5 characters in it it would look like this:

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

There will be multiple boxes present on a page so it needs to be able to run for all of them. Is there any method of doing such a thing?

Please ask questions. thanks.

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>