jQuery + css redimensionnable en fonction du nombre de caractères

Question

J'essaie d'avoir chaque élément span contenant une citation pour changer la taille de la police en fonction du nombre de caractères. Il peut y avoir plusieurs citations par page.

J'ai un jQuery faire le redimensionnement, mais depuis « : nième de type » ne s'applique pas aux classes, le jQuery affiche les citations en fonction du montant de caractère de la dernière citation que. Je me demande comment je peux différencier les deux citations sans utiliser d'identifiants.

Voici un 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"); 
 
    }  
 
\t 
 
});

.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> \t \t \t \t 
 
    <div class="text"> 
 
     Text 2. 
 
    </div> 
 
    </div> 
 
    <div class="type-post"> 
 
    <div> 
 
     <h2>Title 3</h2> 
 
    </div> \t \t \t \t 
 
    <div class="text"> 
 
     Text 3. 
 
    </div> 
 
    </div> 
 
    <div class="type-post"> 
 
    <div> 
 
     <h2>Title 4</h2> 
 
    </div> \t \t \t \t 
 
    <div class="text"> 
 
     Text 4. 
 
    </div> 
 
    </div> 
 

 
    <div class="type-post category-motivation"> 
 
    <div> 
 
     <h2>Title 5</h2> 
 
    </div> \t \t \t \t 
 
    <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> \t \t \t \t 
 
    <div class="text"> 
 
     Text 6. 
 
    </div> 
 
    </div> 
 
    <div class="type-post category-motivation"> 
 
    <div> 
 
     <h2>Title 7</h2> 
 
    </div> \t \t \t \t 
 
    <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>

Answer 1

Vous devez utiliser la fonction jQuery .each en boucle sur chaque citation. J'ai modifié le code de votre Fiddle comme suit (non testé):

$(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 
});