如何将JQuery应用于具有相同类的每个元素？

Question

当前，我遇到一个问题，它将添加每个div并将它们组合在一起，而不是分别应用于同一类。 我希望能够根据div的宽度自动更改字体的大小。

我创建了一个JSFiddle，显示了我遇到的问题： https ://jsfiddle.net/gkbukntb/

任何帮助将非常感激。 谢谢。

HTML：

<div class="inside-border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie faucibus scelerisque. Aliquam ullamcorper ut nisi sit amet efficitur. Sed eget venenatis diam, vitae ultricies neque. 
</div>
<div class="inside-border">
Test
</div>
<div class="inside-border">
Test
</div>
<div class="inside-border">
Test
</div>
<div class="inside-border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie faucibus scelerisque. Aliquam ullamcorper ut nisi sit amet efficitur. Sed eget venenatis diam, vitae ultricies neque. 
</div>

使用Javascript：

$(function() {
    var $quote = $(".inside-border");
    var $numWords = $quote.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    } else if (($numWords >= 10) && ($numWords < 15)) {
        $quote.css("font-size", "33px");
    } else if (($numWords >= 15) && ($numWords < 20)) {
        $quote.css("font-size", "29px");
    } else if (($numWords >= 20) && ($numWords < 30)) {
        $quote.css("font-size", "26px");
    } else if (($numWords >= 30) && ($numWords < 40)) {
        $quote.css("font-size", "20px");
    } else if (($numWords >= 40) && ($numWords < 50)) {
        $quote.css("font-size", "17px");
    } else if (($numWords >= 50) && ($numWords < 60)) {
        $quote.css("font-size", "15px");
    } else if (($numWords >= 60) && ($numWords < 70)) {
        $quote.css("font-size", "14px");
    } else if (($numWords >= 70) && ($numWords < 80)) {
        $quote.css("font-size", "12px");
    } else if (($numWords >= 80) && ($numWords < 90)) {
        $quote.css("font-size", "12px");
    } else if (($numWords >= 90) && ($numWords < 100)) {
        $quote.css("font-size", "10px");
    } else {
        $quote.css("font-size", "17px");
    }
});

Answer 1

像这样简单地使用each() ：

 $(function() { $(".inside-border").each(function() { $quote = $(this); var $numWords = $quote.text().split(" ").length; if (($numWords >= 1) && ($numWords < 10)) { $quote.css("font-size", "36px"); } else if (($numWords >= 10) && ($numWords < 15)) { $quote.css("font-size", "33px"); } else if (($numWords >= 15) && ($numWords < 20)) { $quote.css("font-size", "29px"); } else if (($numWords >= 20) && ($numWords < 30)) { $quote.css("font-size", "26px"); } else if (($numWords >= 30) && ($numWords < 40)) { $quote.css("font-size", "20px"); } else if (($numWords >= 40) && ($numWords < 50)) { $quote.css("font-size", "17px"); } else if (($numWords >= 50) && ($numWords < 60)) { $quote.css("font-size", "15px"); } else if (($numWords >= 60) && ($numWords < 70)) { $quote.css("font-size", "14px"); } else if (($numWords >= 70) && ($numWords < 80)) { $quote.css("font-size", "12px"); } else if (($numWords >= 80) && ($numWords < 90)) { $quote.css("font-size", "12px"); } else if (($numWords >= 90) && ($numWords < 100)) { $quote.css("font-size", "10px"); } else { $quote.css("font-size", "17px"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inside-border"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie faucibus scelerisque. Aliquam ullamcorper ut nisi sit amet efficitur. Sed eget venenatis diam, vitae ultricies neque. </div> <div class="inside-border"> Test </div> <div class="inside-border"> Test </div> <div class="inside-border"> Test </div> <div class="inside-border"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie faucibus scelerisque. Aliquam ullamcorper ut nisi sit amet efficitur. Sed eget venenatis diam, vitae ultricies neque. </div> 

Answer 2

换句话说，这也是可能的。

$(function() {
    var $quote = $(".inside-border");
      for(var i=0;i<$quote.length;i++){
        var $numWords = $quote[i].innerHTML.split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
      $quote[i].style = "font-size:36px";
    } else if (($numWords >= 10) && ($numWords < 15)) {
      $quote[i].style = "font-size:33px";
    } else if (($numWords >= 15) && ($numWords < 20)) {
      $quote[i].style = "font-size:29px";
    } else if (($numWords >= 20) && ($numWords < 30)) {
      $quote[i].style = "font-size:26px";
    } else if (($numWords >= 30) && ($numWords < 40)) {
      $quote[i].style = "font-size:20px";
    } else if (($numWords >= 40) && ($numWords < 50)) {
      $quote[i].style = "font-size:17px";
    } else if (($numWords >= 50) && ($numWords < 60)) {
      $$quote[i].style = "font-size:15px";
    } else if (($numWords >= 60) && ($numWords < 70)) {
      $quote[i].style = "font-size:14px";
    } else if (($numWords >= 70) && ($numWords < 80)) {
      $quote[i].style = "font-size:12px";
    } else if (($numWords >= 80) && ($numWords < 90)) {
      $quote[i].style = "font-size:12px";
    } else if (($numWords >= 90) && ($numWords < 100)) {
      $quote[i].style = "font-size:10px";
    } else {
      $quote[i].style = "font-size:17px";
    }
  }
});