凌乱但工作jQuery

我已经写了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});

来源

2011-10-30 ggwicz

["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总是矫枉过正。

来源

2011-10-30 19:21:22 Raynos

有趣。但请解释一下，为什么_always_。 – Tadeck

@Tadeck表现。大家都知道DOM比jQuery快10-100倍。 – Raynos

我怀疑它（我坚信不是_everyone_ :)）。有些人认为可读性和可移植性（跨浏览器），另外也不想过分详细，例如。 John Resig（jQuery的创建者）在您使用的选择器API的情况下做到了这一点：http://ejohn.org/blog/thoughts-on-queryselectorall/。无论如何，我给你+1，因为我认为你的答案是值得的。 – Tadeck

简单地摆脱重复的代码：

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

来源

2011-10-30 19:00:01 ThiefMaster

岂不'$（”山坳头段H2" ）h2width（）'得到重新计算的每一个找到的元素'.COL头跨度'选择器？ – ZenMaster

如果他有多个，那么是的;我已经编辑了第一个例子 – ThiefMaster

哦，人......你非常喜欢我的。：S你只需要使用.each $（this）将不起作用。 –

我会做这样的可能？较短，但也许不是作为有案可稽：

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

来源

2011-10-30 19:02:06

他使用的是'span'和'h2' - 所以'$（this）'不起作用。 – ThiefMaster

@ThiefMaster啊！谢谢，错过了那一个。编辑。 –

只需使用一个功能：

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');

来源

2011-10-30 19:04:39 Andrea

这一个是最可读...但是，我会建议把函数定义上面的函数调用只是更好的可读性... +1，如果你这样做:) – Ryan

我可能会重写代码以下列方式：

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's .each() function的详细信息，请参见。

编辑：或者更短：

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

来源

2011-10-30 19:37:43 Tadeck

为什么没有缓存'jQuery（this）'：:( – Raynos

@Raynos：现在你应该满意:) – Tadeck

为什么'jQuery'而不是'$'？越短越好。 –

凌乱但工作jQuery

回答

相关问题