jquery check which li is display block and get value
<p>i am trying to get value of a product from a list of li of same ul which in display:block (others are hidden). how ever when i click on to choose a different product size the price changes and the li display:block changes to none whith that li having the price related to cliked size being display:block now . I want to get the value from the li which is display:block but its saying undefined . can anyone help me out with this my code is </p>

<pre><code> $(document).on("click", ".sizes li", function() {
 if ($('.sizes-list li').is(':visible'))
 {
 var price=$(this).find('dd').html();
 alert(price);
 }
 }); 
</code></pre>

<p>markup for li for sizes-list ul</p>

<pre><code>&lt;ul class="sizes-list"&gt;
&lt;li style="display:block"&gt;&lt;dd&gt;$7&lt;/dd&gt;&lt;/li&gt;
&lt;li&gt;&lt;dd&gt;$8&lt;/dd&gt;&lt;/li&gt;
&lt;li&gt;&lt;dd&gt;$9&lt;/dd&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>markup for li for size ul (on size buttons)</p>

<pre><code>&lt;ul class="sizes"&gt;
&lt;li&gt;&lt;a href="#"&gt;Small&lt;/dd&gt;&lt;/a&gt;
&lt;li&gt;&lt;a href="#"&gt;Medium&lt;/dd&gt;&lt;/a&gt;
&lt;li&gt;&lt;a href="#"&gt;Large&lt;/dd&gt;&lt;/a&gt;
&lt;/ul&gt;
</code></pre>
