jQuery grid-system - handing different row widths

Question

I made a function in jQuery for my home-made grid system. When a row has too many columns 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?

Answer 1

Things I pondered:

• What's with the underscores everywhere?
• Why not use regular jQuery convention and use this instead of element in your each iterator?
• What's the use-case for this? A regular user will never see the console, so logging to it doesn't help anyone.
• Even if someone is watching the console, what's the point of warning them when the row is just summarily removed? At least give the user a chance to fix the problem. It's worse if you're not looking at the console - then stuff is just gone with no explanation.
• And the warning, "You have too many columns", isn't really truthful. The problem is that the columns - even if it's just 1 - are too wide. You code isn't checking how many there are.
• But mostly: Why use percentages? Just compare widths directly. Saves you a whole lot of trouble (and code)

This seems clearer to me:

function validateRowWidth() {
  $('.row').each(function (index) {
    var row = $(this), // use `this`
        widthSum = 0;

    // sum up the (direct descendant) column widths
    row.children('[class*="size-"]').each(function () {
      widthSum += $(this).outerWidth(true); // 1 line is all you need here
    });

    // compare and warn if need be
    if(widthSum > row.width()) {
      // alert is not a great choice, but it's better than console.log,
      // if this is user-facing. Explain the problem, and propose solutions.
      alert("Row " + index + " is too wide. Remove one or more columns or make them narrower.");
    }
  });
}