JQuery does not get the correct width

Question

I used this script to get the width and then apply it to one element:

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

        console.log(slideSize);

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

However, for some reason there are elements that sometimes do not get the appropriate width and height. As you can see in this fiddle: https://jsfiddle.net/cpfgtuzo/5/ the last element has the correct dimensions, and the rest are all above their width. I am trying to make them all be square, and I also need to support older browsers.

This only seems to be a problem when the window size is smaller and the four elements flow in 2 columns.

Answer 1

After commenting on another answer,

, script, ( )

. , ~ 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
    });                
});

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/