jQuery получает все значения ширины определенного элемента в определенном элементе и суммирует их

#javascript #jquery #css

Вопрос:

Я создаю функцию для своей системы сетки, чтобы проверить size , больше ли элементов в row их width s, тогда 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%

Фактический результат:

Ответ №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);
    }
}

1. Да, хорошо, но как мне это сделать тогда?: C

2. Спасибо, это сработало: D но каковы эти i, e аргументы из функций? : S

3. @Dreiba они обозначают index и element , как передано jQuery . Index — это индекс в коллекции, element — это сам элемент и совпадает с each . Вы снова оборачиваете его в объект jQuery, делая $(e) так, чтобы функции jQuery были доступны для него. Кстати, не забудьте проголосовать, если мой ответ был полезен 😉

4. @Dreiba Заменить width() на outerWidth(true) . Смотрите: api.jquery.com/outerwidth

5. @Dreiba это связано с тем, что значения с плавающей запятой не являются точными на 100% в языках программирования из-за двоичной природы компьютеров. Чем больше вычислений с плавающей запятой, тем больше отклонений вы получите. Однако лучше всего округлять конечный результат. Но не думайте, что это повышает вашу точность. Если вам нужны более точные числа с плавающей запятой, доступны другие решения. На данный момент вы можете использовать Math.round(sum) .