Question

So I have this list that uses the same class name on all the items in the list. I have a jQuery plugin that finds the tallest element and makes the heights of all the list items equal to the tallest.

The thing that I want to do is that I want to run the method for each UL group. What I mean is that right now jQuery is selecting ALL the LI elements even if they are in other Lists and makes them all the same as the tallest one. I only want the list items to be as tall as the tallest element in their list not in other lists.

This is how I call it and it works, but not the way that I’m asking.

$j('.list-item').equalHeights(200); //minimum is 200px

I tried this but it yields the same results:

$j('.lists').find('li').equalHeights(200);

I wasn’t sure if i had to loop through each UL then run the method that way?

HTML:

<ul class="lists">
    <li class="list-item">item</li>
    <li class="list-item">item</li>
    <li class="list-item">item</li>
    <li class="list-item">item</li>
</ul>
<ul class="lists">
    <li class="list-item">item</li>
    <li class="list-item">item</li>
    <li class="list-item">item</li>
    <li class="list-item">item</li>
</ul>
<ul class="lists">
    <li class="list-item">item</li>
    <li class="list-item">item</li>
    <li class="list-item">item</li>
    <li class="list-item">item</li>
</ul>

Answer 1

Yes, you’ll want to loop:

$j('.lists').each(function() {
    $j(this).find('li').equalHeights(200);
});

Your $j('.lists').find('li').equalHeights(200); was close, but it finds all of the li elements under all of the lists and returns a single jQuery instance containing all of them (so, still the whole set). The above processes each list in isolation.