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

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

2 个答案: