javascript - 凌乱但有效的 jQuery

Question

我已经为我正在进行的一个小项目编写了您将在下面看到的 jQuery。它工作完美，一切就绪，但是，如您所见，它很困惑，有点……冗长。

我已经尝试了很多不同的方法来清理它，但我不只是像忍者一样足以真正清理它。有什么建议吗？提前谢谢大家!

  var colspan = $(".col header span"),
      rowspan = $(".row header span"),
      topspan = $(".top header span");

  var colh2 = $(".col header h2").h2width();
  var rowh2 = $(".row header h2").h2width();
  var toph2 = $(".top header h2").h2width();

  var colwidth = 820 - colh2;
  var rowwidth = 820 - rowh2;
  var topwidth = 820 - toph2;

  colspan.css({float: 'left', width: colwidth});
  rowspan.css({float: 'left', width: rowwidth});
  topspan.css({float: 'left', width: topwidth}); 

Answer 1

["col", "row", "top"].forEach(function (className) {
  var str = "." + className + " header";
  var h2s = document.querySelectorAll(str + " h2");
  var spans = document.querySelectorAll(str + " span");
  var width = 820 - h2width(h2s);
  Array.prototype.forEach.call(spans, function (span) {
    span.style.float = "left";
    span.style.width = width;
  });
});

因为 jQuery 总是矫枉过正。