文字数に応じてjQuery + CSSのサイズ変更が可能な引用符

Question

各スパン要素に文字数に応じてフォントサイズを変更するための引用符が含まれています。ページごとにたくさんの引用があります。

"：nth-​​of-type"はクラスには適用されないので、jQueryは文字サイズと最後の引用のみに従って両方の引用符を表示します。 idsを使わずに両方の引用符を区別できるのだろうか。

<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

あなたはそれぞれの引用をループに.each jQueryの機能を使用する必要があります。ここでは

はjfiddleです。あなたのフィドルのコードを以下のように修正しました。（未テスト）：

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