jquery - 如何使用 jQuery 更改多个元素的字体大小

Question

我需要将我的元素的字体大小增加 1。我已经这样做了，但是还有很长的路要走。

HTML

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

CSS

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

我的问题是，如何一次定位所有元素？没有创建很多行？

Answer 1

您可以遍历 div 的每个 child 并使用 $(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>

供引用

► .children()

► $(this)