Search code examples
jqueryjquery-uijquery-selectorsjquery-ui-tabsjquery-tabs

Getting ID of outer element

If I am dynamically generating HTML similar to this?

<li class="ui-state-default ui-corner-top" id="tab_pg_4">
    <a href="#ui-tabs-8"><span>Group5</span></a>
</li>

<li class="ui-state-default ui-corner-top" id="tab_pg_5">
    <a href="#ui-tabs-10"><span>Group4</span></a>
</li>

<li class="ui-state-default ui-corner-top" id="tab_pg_6">
    <a href="#ui-tabs-19"><span>Group8</span></a>
</li>

and I have a javascript variable which contains the string Group4

How do I console.log or alert tab_pg_5?

Solution

  • Use the jquery function .closest() to find the closest matching ancestor.

    var myVar = 'Group4';
console.log($('a[href^="#ui-tabs-"] span:contains("' + myVar + '")').closest('li').attr('id'));