CODEWITHSUNDEEP
javascriptjquerycss
Bas
Bas

Reputation: 2210

jQuery getting all widths of a specific element in a specific element and sum them up

I'm making a function for my grid system to check if the size elements in the row their widths is more then 100%, it hides the row.

Here is what my HTML looks like:

            <div class="row">
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
                <div class="column size-1"><p>column-size-1</p></div>
            </div>
            <div class="row">
                <div class="column size-2"><p>column-size-2</p></div>
                <div class="column size-2"><p>column-size-2</p></div>
                <div class="column size-2"><p>column-size-2</p></div>
                <div class="column size-2"><p>column-size-2</p></div>
                <div class="column size-2"><p>column-size-2</p></div>
                <div class="column size-2"><p>column-size-2</p></div>
            </div>

In 1 row, can fit 12 columns. So a size-1 class is 1 / 12 in percentage.

I have this piece of code and i have already achieved to get every width of each size element in one row. But only separately...

I want it to get every width of every size element wich it can find in every row, and sum those up.

Here is what my function currently looks like.

function check() {
    var size = '.row [class*="size-"]',
        _size = $(size);
    $(_size).each(function () {
        var widths = $(this).width(),
            inProcent = (widths) / $(this).parent().width() * 100;
            console.log(inProcent);
    });
}

Wanted output:

100%
100%

Actual output:

8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
8.333333%
16.666667%
16.666667%
16.666667%
16.666667%
16.666667%
16.666667%

Upvotes: 0

Views: 259

Answers (1)

MarioDS
MarioDS

Reputation: 13073

You're logging the size for each element seperately, you still need to sum them up together. Also you will want to do that seperately for each row.

function check() {
    var rows = $('.row');
    rows.each(function(i, e) { //here "this" is the row
        var columns = $(e).find('[class*="size-"]');
        var sum;
        columns.each(function (i, el) { //here "this" becomes the column.
            //If you want to access the row, you need the "e" variable!
            var width = $(el).width(), 
            inProcent = width / $(el).parent().width() * 100;
            sum += inProcent;
        }); 
        console.log(sum);
    }
}

Upvotes: 1

Related Questions