凌亂但工作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

回答

相關問題