'Prblem with equal heights jquery

I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.

The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height

I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.

     <script>
     if($(window).width() > 800){
         $('#group1port div').equalHeights();
     }
    </script>

Here is a sample of the code

<div class="row" id="group1port">
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered" id="group1porteq">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bar-chart font-dark hide"></i>
                    <span class="caption-subject font-dark bold uppercase">Bulletin</span>
                </div>
            </div>
            <div class="portlet-body">
                text
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4">
        <div class="portlet light bordered" id="group1porteq">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bar-chart font-dark hide"></i>
                    <span class="caption-subject font-dark bold uppercase">Bulletin</span>
                </div>
            </div>
            <div class="portlet-body">
                text
            </div>
        </div>
    </div>
</div>
htmljquery


Solution 1:[1]

I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.

$('#group1port').find('#group1porteq').each(function() {
    // Do equal height stuff
});

I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/

Solution 2:[2]

You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 xCRKx TyPHooN
Solution 2 Erik Grosskurth

Related Questions