Здравствуйте,
Я недавно начал осваивать Javascript и столкнулся с такой задачей. Имею функцию которая задает изображениям и их родителям высоту и ширину в зависимости от ширины контейнера. В контейнере, некоторые изображения имеют высоту в два раза выше стандартной высоты, т.е. вертикальные и помечаются классом "vertical" Проблемные участки (сроки: 21, 25, 27), на которых появляются ошибки "arrImgs[i].find is not a function". Подскажите пожалуйста, что я делаю не так? Может быть есть более изящное решение этой задачи?
function getImageWidthForScreen(containerWidth) {
var numColumns = 0,
spaceLeft = 0,
ratio = 0,
imageWidth = 300,
imageHeight = 186,
itemMargin = 7,
newImgW, i, len, row, w, h, itemClass;
numColumns = Math.floor(containerWidth / imageWidth);
spaceLeft = containerWidth - numColumns * (imageWidth - itemMargin);
if(spaceLeft > 0) {
newImgW = 0;
if(!(numColumns === 1 && imageWidth / 2 > spaceLeft)) {
numColumns += 1
}
newImgW = Math.floor(containerWidth / numColumns) - itemMargin;
ratio = imageWidth / newImgW;
var arrImgs = $('.content-box');
for(i = 0, len = arrImgs.length; i < len; i += 1) {
itemClass = arrImgs[i].find('img').className;
row = itemClass === 'vertical' ? 2 : 1;
w = newImgW;
h = 0;
arrImgs[i].width(w).find("img").width(w);
h = (Math.floor(imageHeight / ratio) + itemMargin) * row - itemMargin;
arrImgs[i].height(h).find("img").height(h);
}
}
return newImgW + itemMargin
}
<div id="container">
<div class="content-box">
<img class="vertical" width="300" height="379" src="img1.jpg">
</div>
<div class="content-box">
<img class="horizontal" width="300" height="186" src="img2.jpg">
</div>
...
</div>
