javascript - slider 高度不相等

Question

我有四个不同高度的 slider ，我想为所有 slider 设置相同的高度，并且应该从每个 slider 评估高度。因此，我使用每个条件并根据每个 slider 值检查值。但问题是其中一个高度较大的 slider 无法正常工作。请提出问题所在。

JS

   var maximum = null;

    $('.lgi-grouping-responsive').each(function() {
        var value = parseFloat($(this).height());
        maximum = (value > maximum) ? value : maximum;

    });

HTML

<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed
</div>
<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed</div>
<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>
<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>

Answer 1

在 html 中，不需要添加“.”在类名前面。只需写:

<div class="lgi-grouping-responsive">

“.”用于 jquery 获取具有该类名的所有 div。我已将您的代码放入工作 fiddle 中。您将看到所有 div 最终具有相同的高度(最大):

var maximum = 0;
var $biggestDiv = null;

    $('.lgi-grouping-responsive').each(function() {
        var value = parseFloat($(this).height());
        if (value > maximum) {
            maximum = value;
            $biggestDiv = $(this);
        }
    });

$('.lgi-grouping-responsive').not($biggestDiv).css("height", maximum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed
</div>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed</div>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>