Question

I have several definition lists each containing a nested ordered list and anchor. On click, I need to return the corresponding list items. Can anybody tell me if I am on the right track with the below code? Thanks.

<dl>
<dt><a href="/">Colors</a></dt>
<dd>
    <ol>
        <li><a href="/">White</a></li>
        <li><a href="/">Blue</a></li>
        <li><a href="/">Red</a></li>
        <li><a href="/">Green</a></li>
        <li><a href="/">Orange</a></li>
     </ol>
 </dd>
 <dt><a href="" class="agree">Agree</a></dt>
 </dl>
 <dl>
<dt><a href="/">Shapes</a></dt>
<dd>
    <ol>
        <li><a href="/">Square</a></li>
        <li><a href="/">Circle</a></li>
        <li><a href="/">Triangle</a></li>
        <li><a href="/">Rectangle</a></li>
        <li><a href="/">Hexagon</a></li>
     </ol>
 </dd>
 <dt><a href="" class="agree">Agree</a></dt>
 </dl>


$('.agree').click(function(e) {
e.preventDefault();

var items = $(this).closest(ol).children(li);    

$(items).each(function() {                   
    alert($(this).text());
});
});

Answer 1

$('.agree').click(function(e) {
  e.preventDefault();

  var items = $(this).parent().prev('dd').find('ol').children('li');   
  $(items).each(function() {                   
     alert($(this).text());
  });
});

DEMO