滑块高度不相等

Question

I have four sliders with different heights, I want to set same height for all sliders and height should be evaluvated from each slider. So I'm using each condition and checking the values based on each slider values. But the problem is one slider is not working which one is large height. Please suggest what is the issue.

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

In your html, you don't need to add the "." in front of the class name. Just write:

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

The "." is used for jquery to pick up all the divs with that classname. I've put your code into a working fiddle for you. You'll see all the divs end up with the same height (maximum):

 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>