Checking number of of columns in a row I have a own made grid system and made a jQuery function for that to check if there are not too many columns in each row. If so, delete the HTML code of the row.

Normally in my grid system, there fits 12 columns in 1 row, but I can change that.

In HTML, I've written them like this:

            &lt;div class="row"&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
            &lt;/div&gt;


In this jQuery function, im checking the number of each [class*="size-"] and counting them up.

    function validateRowWidths() {
        $('.row').each(function (index) {
            var row = $(this),
                columns = 0;
            row.children('[class*="size-"]').each(function () {
                var eachSizeNumber = Number($(this).attr('class').match(/\d+$/)[0]);
                columns += eachSizeNumber;
            });

            row.children('[class*="offset-"]').each(function () {
                var eachSizeNumber = Number($(this).attr('class').match(/\d+$/)[0]);
                columns += eachSizeNumber;
            });

            row.children('[class*="push-"]').each(function () {
                var eachSizeNumber = Number($(this).attr('class').match(/\d+$/)[0]);
                columns += eachSizeNumber;
            });

            row.children('[class*="pull-"]').each(function () {
                var eachSizeNumber = Number($(this).attr('class').match(/\d+$/)[0]);
                columns += eachSizeNumber;
            });

            console.log(columns);

            if (columns &gt; 12) {
                $(this).remove();
                console.log("Row " + (index + 1) + " is has to many colums in it. Remove one or more columns or make them narrower.");
            }
        });
    }


For all the grid extensions such as offset, push or pull i have to write that same each function again.

The HTML markup for the grid extensions looks like this:

            &lt;div class="row"&gt;
                &lt;div class="column size-1 offset-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1 push-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
                &lt;div class="column size-1"&gt;...&lt;/div&gt;
            &lt;/div&gt;


Can I do this in a better way?
You could try: 


Using Multiple selectors   
Moving the calculation logic to a function so that you can re-use it elsewhere or refactor/change in a single place if the need be.    


Applying this you get something like the following:

row.children('[class*="size-"],[class*="offset-"],[class*="push-"],[class*="pull-"]').each(function () {
            columns += getCurrentSize(this);
        });

 function getCurrentSize(element){
     return Number($(element).attr('class').match(/\d+$/)[0]);
 }


However, if you want each class to be evaluated separately, as mentioned in the comments, you could first try adding these elements to an array and then perform a common action on them. Something like - 

var uniqueClassColumns = [];
uniqueClassColumns.push($('[class*="size-"]'));
uniqueClassColumns.push($('[class*="offset-"]'));
uniqueClassColumns.push($('[class*="push-"]'));
uniqueClassColumns.push($('[class*="pull-"]'));

uniqueClassColumns.each(function () {
                columns += getCurrentSize(this);
            });

     function getCurrentSize(element){
         return Number($(element).attr('class').match(/\d+$/)[0]);
     }