Alert the count of <li>s in an adjacent <div> to a button being clicked.

Question

Hey,

This is my first post but this website has been very useful so here goes... Oh and im just a beginner ;-)

1. I have a button (a div with a class) and another div inside an element side by side.
2. Inside the second div I have a ul and a number of li's that will dynamically change.
3. when the button is clicked, I need the count of li's in the div next to the button only
4. the various alerts I've used are wrong and return the count of ALL li's inside all 'hidden-row-content' not just the adjacent 'hidden-row-content' div so it returns 4 instead of 2 :-(

HTML code:

<td>
    <div class="show-hidden-row"><!-- --></div>
    <div class="hidden-row-content">
        <ul>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
    <em>persons name</em>
</td>
<td>
    <div class="show-hidden-row"><!-- --></div>
    <div class="hidden-row-content">
        <ul>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
    <em>persons name</em>
</td>

Jquery code:

non of these are right but hopefully one is close enough to easily spot the problem

$(".show-hidden-row").click
(function() {

    window.alert($(this,".hidden-row-content").children("ul").length);
    window.alert($(this).find('.hidden-row-content ul li').length);
    window.alert($('.hidden-row-content ul li').length);
    window.alert($(this).next('.hidden-row-content').length);

  }
);

Answer 1

This finds the next <div>, and then searches it for <li>s:

$(this).next('.hidden-row-content').find('li').length

Working example: http://jsbin.com/orudu