jquery - 外側の要素の ID を取得する

Question

これに似た HTML を動的に生成している場合はどうなりますか?

<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>

文字列を含むjavascript変数がありますGroup4

console.log または alert を実行するにはどうすればよいtab_pg_5ですか?

Answer 1

jquery 関数.closest()を使用して、最も近い一致する祖先を見つけます。

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

Answer 2

このようなもので十分です。で<ul>囲むと、セレクターをより具体的にすることができます。

var myId = 'Group4';
var elementId = $('li:contains(' + myId + ')').attr('id');

Answer 3

クリックイベントを追加して、最も近いものを使用するだけです

$('a').click(function(){
   var lid = $(this).closest('li').attr('id');
    alert(lid);
});

ワーキングデモ

Answer 4

そうそう、私は質問を完全に誤解しているので、:

$('a span').each(function({ 
    if ((this).html() == 'Group 4'))
        var = $(this).parent().parent();
});