2015-04-20 47 views
0

我使用JS與類似的if語句爲了有Divs並排。正如話題標題所示,這些if語句可以以任何方式組合或提高效率嗎?結合類似的如果在Javascript中的語句

編輯:這段代碼的目的是使所有divs的高度相同。

JS:

$(document).ready(function(){ 
    $('.container').each(function(){ 
     var firstDiv = $(this).find('.first'); 
     var secondDiv = $(this).find('.second'); 
     var thirdDiv = $(this).find('.third'); 
     var fourthDiv = $(this).find('.fourth'); 
     if(firstDiv.height() >= secondDiv.height()){ 
      secondDiv.css('height',firstDiv.height()); 
     } else { 
      firstDiv.css('height',secondDiv.height()); 
     } 
     if(secondDiv.height() >= thirdDiv.height()){ 
      thirdDiv.css('height',secondDiv.height()); 
     } else { 
      secondDiv.css('height',thirdDiv.height()); 
     } 
     if(thirdDiv.height() >= fourthDiv.height()){ 
      fourthDiv.css('height',thirdDiv.height()); 
     } else { 
      thirdDiv.css('height',fourthDiv.height()); 
     } 

    }); 
}); 

測試頁:http://www.gloryhood.com/articles/ztest.html

+0

你的目標是讓所有的div都一樣高嗎? –

+0

縮短代碼將是一個選項,使用循環和單個jQuery集合對象,但您的目標不明確。 –

+0

當'if'語句都不符合時,什麼'else'語句被執行?另外Trueblue說。你的目標不明確...... – Michelangelo

回答

3

解釋作爲代碼的目的是平衡所有的div的高度,你可以否定任何if需要聲明並使用jQuery的map()獲得所有高度,然後使用Math.max獲得最高。試試這個:

$('.container').each(function(){ 
    var $divs = $('.first, .seconds, .third, .fourth', this); 
    var heights = $divs.map(function() { 
     return $(this).height(); 
    }).get(); 
    $divs.height(Math.max.apply(this, heights)); 
}); 

請注意,初始選擇器可以通過向所有div添加一個公共類來改進。

+0

圍繞你的頭部有點複雜(說更多關於我的JS能力,而不是你的代碼),但簡短,很好,所以+1。 –

+0

與TrueBlueAussies解決方案几乎相同,但他使用'each'手動創建數組。 –

+0

「...爲了找到最大高度「,你的意思是沒有看到他創建了一個數組,我沒有意識到使用apply()提供一個數組作爲參數列表 - 似乎很有用! –

3

如果你的目標是讓所有的任何的最大高度,當前的代碼將無法正常工作的高度(除非第一個div是最高的) 。

解決方案:首先檢查最大高度的高度,然後將這個高度應用於所有高度。

$(document).ready(function() { 
    $('.container').each(function() { 
     var $divs = $('.blah', this); 
     var height = 0; 
     $divs.each(function(){ 
      height = Math.max($(this).height(), height); 
     }); 
     $divs.css('height',height); 
    }); 
}); 

的jsfiddle:http://jsfiddle.net/TrueBlueAussie/8hko6of7/1/

注意

  • 我不使用你的類名,但在所有的div一個共同的類。

如果你的目標是別的東西,請詳細 :)

+0

清理你的小提琴可能會更好:),見js部分 – Michelangelo

+0

@Mikey:責備OP。我只是從頁面鏈接中提取所有的代碼(我會減少它):) –

+0

哇哈哈,我認爲它從你正在做的事情中被遺漏了。 – Michelangelo