Question

what would be a better way to write this jQuery selector:

// this is called when .nextButton is invoked.
$(this).parent('.question').children('.options').children('.options > li').children('.selected').parent('li').attr('id'));

HTML:

    <div class="question" id="question1">
      <p>What is your age:</p>
      <ul class="options question1Options">
        <li id="q1-1"><div class="radio"></div>10-20.</li>
        <li id="q1-2"><div class="radio"></div>21-30.</li>
        <li id="q1-3"><div class="radio"></div>31-40.</li>
      </ul>
      <div class="nextButton"></div>
    </div>

When a user clicks on one of these li’s it will add a class selected (like a radio button, only one is selected). I’m trying to get the id of the selected radio/li. Thanks.

Answer 1

Try this

$(this).closest('div.question').find('.radio.selected').closest('li').attr('id');

FIDDLE