jQuery + css 可根据字符数调整大小的引号

Question

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

我有一个 jQuery 正在调整大小，但由于“:nth-of-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

您需要使用 .each循环遍历每个引号的 jQuery 函数。我修改了你的 fiddle 的代码如下(未经测试):

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