根据字符数量的jQuery + css大小写引号

Question

我试图让每个包含引号的span元素根据字符数改变字体大小。每页可以有很多引号。

我有一个jQuery做大小调整，但由于“：第n-的型”并不适用于类，jQuery的根据最后报价仅字符数量同时显示的报价。我想知道如何在不使用id的情况下区分两个引号。

这里有一个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

你需要在每个引号使用.each jQuery函数循环。我修改了你的小提琴代码如下（未经测试）：

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