jQuery + css 문자 수에 따라 크기를 재조정 할 수 있습니다.

Question

문자 수에 따라 글꼴 크기를 변경하려면 각 범위 요소에 따옴표가 포함되어 있습니다. 페이지 당 많은 인용 부호가있을 수 있습니다.

크기 조정을 수행하는 jQuery가 있지만 ": nth-of-type"이 클래스에 적용되지 않기 때문에 jQuery는 문자 양에 따라 두 따옴표를 모두 표시합니다. 마지막 인용 부호는입니다. ID를 사용하지 않고 두 따옴표를 어떻게 구별 할 수 있는지 궁금합니다.

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