I made a function in jQuery for my home-made grid system. When a row
has too many column
s in it, it removes the HTML code from that row
.
Normally in my grid system it fits 12 columns in 1 row, but with the function this can easily be changed.
One column with the size of 1 (declared as: column size-1
) has a width of 1/12 (or 8.3333%).
function validateRowWidth() {
var _row = $('.row');
_row.each(function (index, element) {
var totalWidth = 0,
_columnSize = $(element).find('[class*="size-"]');
_columnSize.each(function (index, element) {
var width = $(element).outerWidth(true),
inProcent = Math.round((width / $(element).parent().width()) * 100);
totalWidth += inProcent;
});
if (totalWidth > 100) {
console.log('You have to many columns into your '+(index + 1)+'th row');
$(element).remove();
}
});
}
Is there any way I can improve this?