jQuery height and width not working properly - php

Question

I have an image that has it's width greater than the height and it is still outputting using the second if statement in the jQuery. I do believe it might have something to do with the PHP sector outputting multiple image files. So I changed the id selector to a class selector, but it doesn't want to budge. Does anybody know what I am doing wrong? I have hit rock bottom on this problem.
<?php $userid = $this->session->userdata('userid');
$selectedId = $_REQUEST['id'];
$query1 = $this->db->query("SELECT * FROM userProfilePhotos p, userProfileAlbums a WHERE p.isAlbumCover = 'Yes' AND p.userid = a.userid AND a.userid = '{$selectedId}' AND a.albumId = p.albumId");
foreach($query1->result() as $row1) {?>
<script type="text/javascript">
$(document).ready(function() {
function heightOverWidth() {
return '<div style="width: 102px; height: 136px; border-radius: 3pt; background-color: white; border: 1px solid #C1C1C1; padding: 10pt">'+
'<img id="profileImg" alt="" height="130" src="<?=base_url().$row1->imgURI?>" width="100" />'+
'</div><span class="link-font3"><?=$row1->albumName?></span> <span class="font1"> - <?=$row1->albumDesc?></span>';
}
var img = $(".profileImg");
if (img.width() >= img.height()) {
alert("1");
} if (img.height() >= img.width()) {
$("#albumList").append(heightOverWidth());
}
});
</script>
<?php list($width, $height, $type, $attr) = getimagesize(base_url() . $row1->imgURI); ?>
<div id="albumList" style="padding: 10pt">
<img class="profileImg" style="display: none" alt="" height="<?=$height?>" width="<?=$width?>" src="<?=base_url().$row1->imgURI?>" />
</div>
<?php } ?>

Answer 1

Change the width() to attr('width') and same thing with height. This will read your width/height attributes instead of trying to get the actual width and height. Your solution does not work as an element with display:none doesn't have any visible dimensions.