title: Better way to write this jQuery selector
body: <p>what would be a better way to write this jQuery selector: </p>
  
  <pre><code>// this is called when .nextButton is invoked.
  $(this).parent('.question').children('.options').children('.options &gt; li').children('.selected').parent('li').attr('id'));
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="question" id="question1"&gt;
        &lt;p&gt;What is your age:&lt;/p&gt;
        &lt;ul class="options question1Options"&gt;
          &lt;li id="q1-1"&gt;&lt;div class="radio"&gt;&lt;/div&gt;10-20.&lt;/li&gt;
          &lt;li id="q1-2"&gt;&lt;div class="radio"&gt;&lt;/div&gt;21-30.&lt;/li&gt;
          &lt;li id="q1-3"&gt;&lt;div class="radio"&gt;&lt;/div&gt;31-40.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="nextButton"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>