Question

我正在为我的网格系统创建一个函数来检查size row中的width元素是否超过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>

在一行中，可以容纳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%

实际输出：

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

jQuery获取特定元素中特定元素的所有宽度并总结它们

1 个答案: