Question

I hope I phrased that correctly. I’m using a jQuery function to resize text within separate spans based on how long the text is. So far so good, but it’s totaling all the values and I need it to check them individually and base the resizing rules on the longest value. The snag is that the span(s) in question are rendered with a for-loop, so it’s no wonder it’s combining the values. There’s never more than three of these spans displayed at once.

Can anyone help?

<script type="text/javascript">
var $quote = $(".check_in_footer .last_check.units");
var $numWords = $quote.text().length;

jQuery(document).ready(function($) {

    alert($numWords);

    $(function() {
        if (($numWords >= 1) && ($numWords < 6)) {
            $quote.css("font-size", "400%");
        }
        else if (($numWords >= 7) && ($numWords < 8)) {
            $quote.css("font-size", "600%");
        }
        else {
            $quote.css("color", "#ff0000");
        }

    });
});

Answer 1

  $(".check_in_footer .last_check.units").each(function () {
  var $numWords = $(this).text().length;

    if (($numWords >= 1) && ($numWords < 6)) {
        $(this).css("font-size", "400%");
    }
    else if (($numWords >= 7) && ($numWords < 8)) {
        $(this).css("font-size", "600%");
    }
    else {
        $(this).css("color", "#ff0000");
    }

  });

And you need to remove first two lines of your code (right under opening script tag.
I didn’t check the rest of the code, just implemented the loop logic.