Question

I am trying to get the ID attribute of anchors which has class current, or their parent LI has class current.

I try this 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') + ':';
        }
    });

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.

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.

Any suggestions?

HTML:

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


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

Answer 1

You can select all anchor children of the LI elements, and all children with the current class like this:

var terms = "";
$(".product-tax li.current > a, .product-tax li > a.current").each(function(){
    terms = terms + $(this).attr("id") + ":"
});