滑块高度不相等

时间:2018-05-24 10:25:35

标签: javascript jquery

我有四个不同高度的滑块,我想为所有滑块设置相同的高度,并且应该从每个滑块评估高度。所以我正在使用每个条件并根据每个滑块值检查值。但问题是一个滑块不工作哪一个是高大的。请说明问题所在。

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>

1 个答案:

答案 0 :(得分:3)

在你的html中,你不需要添加“。”在班级名称前面。只需写下:

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

“。”用于jquery来获取具有该类名的所有div。我已经把你的代码变成了一个适合你的小提琴。您将看到所有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>