jQuery获取特定元素中特定元素的所有宽度，并将它们加起来。

Question

我正在为我的网格系统创建一个函数，以检查row中的row元素(它们的widths是否比100%更多)，它隐藏了行。

下面是我的HTML的样子：

            <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>

1行，可容纳12列。因此，size-1类的百分比是1 / 12。

我有这段代码，我已经实现了在一个size中获取每个row元素的每个宽度。但只能分开..。

我希望它能得到它能在每一行中找到的每个size元素的每一个宽度，并把它们加起来。

下面是我的函数当前的样子。

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);
    });
}

想要输出：

100%
100%

实际输出：

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%

Answer 1

您要分别记录每个元素的大小，仍然需要将它们加在一起。另外，您将希望对每一行分别执行此操作。

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);
    }
}