根据角色数量，jQuery CSS可解析的引号

Question

我试图将每个跨度元素包含一个报价，以根据字符计数更改字体大小。每个页面可能有很多报价。

我有一个jQuery进行调整大小，但是"："：nth-type"不适用于类，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");
    }    
	
});

.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>

Answer 1

您需要使用.east 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
});