我需要將元素的字體大小增加1。我已經這么做了，但路途遙遠。

超文本標記語言

<div id="container">
<h3 class="heading">
  24px font
</p>
<p class="content">
  12px font
</p>
<span class="footNote">
  10px font
</span>
<button id="upSize">Larger</button>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.heading {
  font-size: 24px;
}

.content {
  font-size: 12px;
}

.footNote {
  font-size: 10px;
}

jQuery

$(function() {
 $("#upSize").click(function() {
    var headingSize = parseInt($(".heading").css("font-size"));
    var contentSize = parseInt($(".content").css("font-size"));
    var footNoteSize = parseInt($(".footNote").css("font-size"));
    headingSize = headingSize + 1 + "px";
    contentSize = contentSize + 1 + "px";
    footNoteSize = footNoteSize + 1 + "px";
    $(".heading").css({'font-size':headingSize});
    $(".content").css({'font-size':contentSize});
    $(".footNote").css({'font-size':footNoteSize});
  });
});

我的問題是，我如何一次瞄準所有元素？而不產生許多線條？

您可以遍歷div的每個子元素，并使用$(this)更改相應的元素

工作演示

$(function() {
  $("#upSize").click(function() {
    $("div").children().each(function() {
      var size = parseInt($(this).css("font-size"));
      size = size + 1 + "px";
      $(this).css({
        'font-size': size
      });
    });
  });
});

.heading {
  font-size: 24px;
}
.content {
  font-size: 12px;
}
.footNote {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="heading">
    24px font
  </p>

  <p class="content">
    12px font
  </p>

  <span class="footNote">
    10px font
  </span>

  <button id="upSize">Larger</button>

我需要增加所有元素的字體大小。但是警告在于字體大小的繼承，所以我需要得到所有的葉節點，并在文本中的br這樣的標簽上加上另一個警告

function addFontSize(fontAddition){
    $("*").filter(function() {
          return $(this).children('body,div,span').length == 0;
    }).each(function() {
        var size = parseInt($(this).css("font-size"));
        size = size + fontAddition + "px";
        $(this).css({
            'font-size': size
        });
    });
}
addFontSize(1);