[SOLVED] jQuery + css resizable quotes according to character count

jQuery + css resizable quotes according to character count

I'm trying to have each span element containing a quote to change font-size according to character count. There can be many quotes per page.

I have a jQuery doing the resizing, but since ":nth-of-type" does not apply to classes, the jQuery displays both quotes according to the character amount of the last quote only. I wonder how I can differentiate both quotes without using ids.

Here's a jfiddle :

<script async src="http://jsfiddle.net/z7du5/24/"></script>

http://jsfiddle.net/z7du5/24/

$(function() {

    var $quote = $(".category-motivation .inspi_legende");
    
    var $numWords = $quote.text().trim().length;
    
    if (($numWords >= 1) && ($numWords < 100)) {
        $quote.css("font-size", "100px");
    }
    else if (($numWords >= 100) && ($numWords < 200)) {
        $quote.css("font-size", "40px");
    }
    else if (($numWords >= 200) && ($numWords < 300)) {
        $quote.css("font-size", "30px");
    }
    else if (($numWords >= 300) && ($numWords < 400)) {
        $quote.css("font-size", "20px");
    }
    else {
        $quote.css("font-size", "10px");
    }    
	
});

.inspi {
    width: 100%;
    display: block;
    margin: 10px 10px 20px 10px;
    background: brown;
}
.inspi_legende {
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    color: white;
    cursor: default;
    display:block;
}
.inspi_source {
    font-size: 16px;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="middle">
  <div class="type-post">
    <div>
      <h2>Title 1</h2>
    </div>
    <div class="text">
      Text 1.
      <span class="inspi">
        <span class="inspi_legende">A quote that doesn't need to be resized for some good reason.
        </span>
      </span>
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 2</h2>
    </div>				
    <div class="text">
      Text 2.
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 3</h2>
    </div>				
    <div class="text">
      Text 3.
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 4</h2>
    </div>				
    <div class="text">
      Text 4.
    </div>
  </div>

  <div class="type-post category-motivation">
    <div>
      <h2>Title 5</h2>
    </div>				
    <div class="text">
      Text 5. Here is a quote which has a various amont of characters (the char. count includes the .inspi_source span on purpose) :
      <span class="inspi">
        <span class="inspi_legende">I am a duck.
          <span class="inspi_source">Donald Duck</span>
        </span>
      </span>
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 6</h2>
    </div>				
    <div class="text">
      Text 6.
    </div>
  </div>
  <div class="type-post category-motivation">
    <div>
      <h2>Title 7</h2>
    </div>				
    <div class="text">
      Text 7. Here is another quote which is potentially longer or shorter than the first one :
      <span class="inspi">
        <span class="inspi_legende">I must admit I'm less a duck than some other inspirational thinkers over here.
          <span class="inspi_source">Herbert Marcuse</span>
        </span>
      </span>
    </div>
  </div>
</td>

Solution

You need to use the .each jQuery function to loop over each quote. I modified the code from your Fiddle as follows (untested):

$(function() {
    // Find all the quotes on the page and loop over them with .each
    $(".category-motivation .inspi_legende").each(function() {
        var $quote = $(this);   // with .each, "this" holds each holds the current item

        var $numWords = $quote.text().trim().length;  // Should be numChars?

        if (($numWords >= 1) && ($numWords < 100)) {
            $quote.css("font-size", "100px");
        }
        else if ($numWords < 200) {
            $quote.css("font-size", "40px");
        }
        else if ($numWords < 300) {
            $quote.css("font-size", "30px");
        }
        else if ($numWords < 400) {
           $quote.css("font-size", "20px");
        } 
        else {
           $quote.css("font-size", "10px");
        }    
    });   // end of .each loop
});