How to get the ID attribute of elements with specific class using jQuery
<p>I am trying to get the ID attribute of anchors which has class current, or their parent LI has class current.</p>

<p>I try this code:</p>

<pre><code>    var terms = '';
    $('.product-tax li').each(function(){
        if ($(this).hasClass('current')) {
            terms += $(this).children('a').attr('id') + ':';
        } else if ($(this).children('a').hasClass('current')) {
            terms += $(this).children('a').attr('id') + ':';
        }
    });
</code></pre>

<p>But it does not work, it gives unexpected result. I want to grab the ID inside anchor, for the classes "current" for either LI or anchor.</p>

<p>Basically I am using each because there is more than one .product-tax and the user makes a selection but the class "current" can be added to LI, or anchor that is why I need to check. This code does not work.</p>

<p>Any suggestions?</p>

<p>HTML:</p>

<pre><code>&lt;div class="product-tax product-color"&gt;
    &lt;h3&gt;Choose color&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" id="color-pink" style="background: Pink;border: 1px solid Pink;"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


&lt;div class="product-tax product-size"&gt;
    &lt;h3&gt;Choose size&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" id="size-2s"&gt;2(s)&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="size-3m"&gt;3(m)&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="size-4l"&gt;4(l)&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="size-5xl"&gt;5(xl)&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="size-6xxl"&gt;6(xxl)&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
