JQuery Selector Issue: How to select anything is a child of the current list item.

Question

I'm sure that title is confusing. This is a Wordpress thing.

So, I have a list of pages and the structure looks like this:

<div id="menu">
  <ul> <!--List of pages-->
    <li class="page-item page-id">
      <a href="Page url"> Ham Man </a>
        <ul class="children">
             <li class="page-item page-id">
             <a href="Page url"> Page 1</a></li>
              <li class="page-item page-id">
              <a href="Page url"> Page 2</a></li>
        </ul>
     </li>
   </ul>
 </div>

My problem is this- There are MULTIPLE titles like 'Ham Man'. So what I need to is work a bit of jQuery so when someone clicks on a title, it displays the PAGES for that title. Easy enough. But when I have multiple titles, this gets tricky.

WHat I need to say is "WHEN someone clicks on a li element in the menu column, display all of the CHILD ELEMENTS (class 'children') JUST for that LI element".

It's gotta be simple, but I can't work it.

A solid Plan B is just to have Wordpress drop a class of 'Parent' into the 'Parent' elements, but that seems like a recipe for MURDER.

Thoughts? Thanks ahead of time!

Answer 1

should be:

$('#menu > ul > li').bind('click', function(){
    var elems = $(this).find('.children').children();

     // elemens contains all child nodes from ul.children
});