Question

I have a html structure like so [list within a list]:

<ul class="outer" >
  <li><input type="text" class="outer_name" value="outer_name"></li>
  <ol class="inner">
    <li><input type="text" value="inner1"><input type="checkbox"></li>
    <li><input type="text" value="inner2"><input type="checkbox"></li>
    <li><input type="text" value="inner3"><input type="checkbox"></li>
  </ol>
</ul>

And I have multiples of these dumped on the page.
I am trying to specify that for each “outer” element, I would like to alert() something as follows:

"outer_name" + "inner1:checked" + "inner2:unchecked" + "inner3:checked"

I have been playing around with an embedded .each function but I cant seem to nail it.

Any help appreciated….

Answer 1

Your HTML is invalid. ul elements cannot directly contain ol elements. The only valid child elements of ul are li elements.

If you fix it:

<ul class="outer" >
  <li><input type="text" class="outer_name" value="outer_name">
    <ol class="inner">
      <li><input type="text" value="inner1"><input type="checkbox"></li>
      <li><input type="text" value="inner2"><input type="checkbox"></li>
      <li><input type="text" value="inner3"><input type="checkbox"></li>
    </ol>
  </li>
</ul>

…then basically:

$(".outer > li").each(function() {
    $(this).find(".inner > li").each(function() {
    });
});