JQuery的沒有得到正確的寬度

我用這個腳本獲得的寬度，然後將其應用到同一個元素：JQuery的沒有得到正確的寬度

$(document).ready(function(){     
    $(".equal-height").each(function(){ 
     var slideSize = $(this).outerWidth(); 

     console.log(slideSize); 

     $(this).css({ "height" : slideSize + "px" }); 
    });     
});

然而，由於某些原因，也有，有時沒有得到一個元素匹配寬度和高度。正如你可以在這個小提琴中看到的那樣：https://jsfiddle.net/cpfgtuzo/5/最後一個元素具有正確的尺寸，但其餘元素都大於它們的寬度。我試圖讓他們都成爲正方形，我也需要支持舊的瀏覽器。

當窗口的大小較小並且四個項目堆疊到一個2列中時，這似乎只是一個問題。

來源

2016-03-07 Sam Willis

其他回答您的意見後，

我已經得到了使用這個腳本，而不是所有大小相同的頁面上的衆多元素（也有較小的集廣場太）

而且

但結果框不出來廣場。如果你檢查你的小提琴，箱子是〜10px的太高

該解決方案似乎解決這些問題，讓我知道如果這能幫助，Working Fiddle

$(document).ready(function() { 
    $(".equal-height").each(function() { 
     var slideSize = $(this).outerWidth(); 

     console.log(slideSize); 

     $(this).css({ "height": slideSize + "px", "width": slideSize + "px" }); 
     //setting the width along with height 
    });     
});

來源

2016-03-07 14:20:39

Downvoters，請注意評論。解決方案按預期工作。有什麼問題？ –

這有一種工作，但廣場現在出來略微太大（雖然平等的高度和寬度都很大）。您可以看到該列不會降至2寬，但將每個項目堆疊1，因爲它們現在太寬而無法堆疊。 –

這是因爲我們可以在Jsfiddle中調整視圖窗口的大小，最初div的寬度將會像前面提到的那樣佔用25％的寬度，然後我們將高度和寬度設置爲像素，我覺得在瀏覽器中查看它應該沒問題，還可以觸發窗口大小調整事件，並重新構建div如果你覺得用戶可能調整窗口大小 –

嗯我覺得有一個jQuery的錯誤，當它計算每個元素的寬度。

以this jsfiddle作爲解決方法。

// Height = Width 
$(document).ready(function() { 
    var width = $('.wide-content').width(); 
    // prevent jQuery from calculating the width of children 
    $('.wide-content').hide(); 
    // $(".equal-height").width() is now 50 
    var slideSize = $(".equal-height").width() * width/100; 

    $(".equal-height").each(function() { 
    $(this).css({ 
     "height": slideSize + "px" 
    }); 
    }); 
    $('.wide-content').show(); 
});

來源

2016-03-07 13:51:02 Huelfe

這解決了不同高度的我的問題，但由此產生的方框不是正方形。如果你檢查你的小提琴，這些盒子太高了〜10px。 –

是的，我可以看到這一點，但我不知道，它來自哪裏。 jQuery給了我一個不同於螢火蟲的寬度。對我來說看起來像一個bug。你可以在沒有jsfiddle的情況下在你的代碼中嘗試這個嗎？ – Huelfe

它仍然出現在我自己的代碼中不正確的尺寸 –

同一高度上的所有元素

我只用第一個框來計算其他元素的高度 - 這ATLEAST將確保相同的高度。此外，它會擺脫這個循環的..

$(".equal-height").css({"height" : $(".equal-height").eq(0).outerWidth()});

一號線即可解決所有問題

但是，因爲這並不符合範圍..

製作不同大小的正方形元素

經過一番搞砸之後，很明顯只有在開始篡改高度後，寬度纔會返回錯誤。這可以通過註釋掉設置高度並觀察輸出的css-command來輕鬆測試。

的解決方案似乎是設置一個預定高度：

.link-quarters {    
    width: 25%; 
    height: 100px; 
    float: left; 
    ...

這將返回所有元素完全相同的寬度（重要組成部分），然後就可以設置程式設計相應的高度沒有問題。

雖然四捨五入仍然存在問題，因爲百分比寬度可能導致十進制數字被瀏覽器（或js）取整。

https://jsfiddle.net/cpfgtuzo/17/

來源

2016-03-07 13:55:05 Mackan

這是一個很好的解決方案，但是我在頁面上有很多使用這個腳本的元素，並不是所有的元素都是相同的尺寸（也有更小的方塊集合），因此爲什麼使用循環。 –

好吧 - 添加了新的解決方案。 – Mackan

JQuery的沒有得到正確的寬度

回答

相關問題