JQuery没有得到正确的宽度

Question

我已经使用此脚本获取宽度，然后将其应用于同一元素：

$(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列时，这似乎只是一个问题。

Answer 1

在您对其他答案发表评论后，

我在页面上有很多使用这个脚本的元素，并不是所有元素都是相同的大小（也有较小的方块组）

和

但由此产生的盒子不会出现方块。 如果你检查你的小提琴，盒子大约10px太高

这个解决方案似乎克服了这些问题，让我知道这是否有帮助， 工作小提琴

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

Answer 2

嗯，我认为jQuery存在一个错误，当它计算每个元素的宽度时。

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

Answer 3

所有元素的高度相同

我只是用第一个盒子来计算其他元素的高度 - 至少这将确保相同的高度。 它也会摆脱那个循环..

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

一条线来统治它们

但是，因为这不适合范围..

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

经过一些搞乱之后，很明显只有在您开始篡改高度后才会返回错误的宽度。 这可以通过注释掉设置高度和观察输出的css命令来轻松测试。

解决方案似乎是设置预定义的高度：

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

这将在所有元素（重要部分）上返回完全相同的宽度，然后您可以在没有问题的情况下以编程方式设置相应的高度。

但是仍然存在舍入问题，因为百分比宽度可能导致十进制数字被浏览器（或js）四舍五入。

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