Javascript 混乱但工作正常的jQuery

我已经为我正在进行的一个小项目编写了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}); 

---

只需删除重复的代码：

$.each(['.col', '.row', '.top'], function(i, cls) {
    var width = $(cls + ' header h2').h2width();
    $(cls + ' header span').css({
        float: 'left',
        width: 820 - width
    });
});

---

也许我会这样做？较短，但可能没有很好的记录：

$(".col header span, .row header span, .top header span").each(function(){
    $(this).css({
        float: 'left',
        width: 820 - $(this).siblings("h2").width()
    });
});

只需使用一个函数：

function updateStyle(name){
   var headerSpan = $('.' + name + ' header span');
   var headerH2 = $('.' + name + ' header h2');
   headerSpan.css({float: 'left', width: 820 - headerH2.h2width()});
}

updateStyle('col');
updateStyle('row');
updateStyle('top');

---

因为jQuery总是太过了。

我可能会用以下方式重写您的代码：

var conts = {
    'col': jQuery('.col header'),
    'row': jQuery('.row header'),
    'top': jQuery('.top header')
};

jQuery.each(conts, function(index, val){
    val.find('span').css({
        'float': 'left',
        'width': 820-val.find('h2').h2width()
    });
});

这将使用缓存主要元素，然后将迭代所有元素应用类似的操作

请参阅有关的更多信息

编辑：甚至更短：

jQuery('.col header, .row header, .top header').each(function(){
    var current = jQuery(this);
    current.find('span').css({
        'float': 'left',
        'width': 820 - current.find('h2').h2width()
    });
});

---

$（“.col header h2”）.h2width（）

是否会为

.col header span

选择器的每个找到的元素重新计算？如果他有多个元素，则是；我已经编辑了第一个示例哦，伙计。。。你和我的很像你只需要使用。每个ot$（这个）都不起作用。这个是最可读的。。。但是，我建议将函数定义放在函数调用之上，以提高可读性+如果你这样做：）有趣。但请解释一下，为什么总是这样。@Tadeck性能。每个人都知道DOM比jQuery快10-100倍。我对此表示怀疑（我坚信不是每个人都这样：）。有些人看重可读性和可移植性（跨浏览器），另外也不想涉及太多细节，例如John Resig（jQuery的创建者）在使用选择器API时所做的那样：。无论如何，我给你+1，因为我认为你的答案是值得的。作为澄清：我不怀疑在性能上的差异，我怀疑这是众所周知的。谢谢你的链接。@Tadeck啊，主要的区别是QSA比gEBCN慢。DOM4元素API为遍历元素树提供了一些便利。为什么没有缓存

jQuery（this）

>：（@Raynos:现在你应该满足了：）为什么

jQuery

而不是

$

？更短是更好的。考虑这一点：<代码> $（‘跨度’，this）。CSS（{浮点）：“左”，“宽”：820 - $（‘H2’，this）.H2WithTh（））；代码>。

this

值仅用于上下文，因此根本不需要使用

$（this）

。@ŠimeVidas：不总是，

jQuery

在

$

执行时工作，但是

$

在

jQuery

执行时不总是工作。看见

jQuery('.col header, .row header, .top header').each(function(){
    var current = jQuery(this);
    current.find('span').css({
        'float': 'left',
        'width': 820 - current.find('h2').h2width()
    });
});