檢索ID <li> 具有特定類別的元素

Question

我在AJAX中檢索要使用的“ li”元素的ID時遇到問題。

<div id="subTab">
    <ul class="nav nav-pills" style="display:none" id="users">
        <li id="AUser"><a href="#AUser"><span class="glyphicon glyphicon-user"></span> User Management</a></li>
        <li id="ARole"><a href="#ARole">Role Management</a></li>
    </ul>
</div>

通過使用此代碼的ajax，我將“ active”類添加到“ li”元素中：

$(this).closest('ul li').addClass('active');

所以我的問題是，如何檢索將具有活動類的li的ID屬性？ 我嘗試了很多方法，但沒有一個成功。

$('#subTab').find('li .active').attr('id');

這個沒有任何回報。

$('#subTab').find('ul li').closest('.active').attr('id');

此代碼返回“ ul”元素ID。

如果有人有解決方案，請幫助我解決此問題，謝謝您的寶貴時間。

Answer 1

您不需要這里的空間。 當您使用空間時，選擇器將使后代與li元素active的類匹配：

$('#subTab').find('li.active').attr('id');

小提琴演示

Answer 2

簡短的方法：

$('#subTab li.active').attr('id')

實際應用： jsfiddle

Answer 3

問題是選擇器中有空格。 一個空格用於選擇后代，您要的是找到一個類為li的后代的active元素。

刪除空間：

$('#subTab').find('li.active').attr('id');

現在，它需要一個<li>且具有class active元素。

從W3C文檔 ：

后代選擇器由兩個或多個由空格分隔的選擇器組成。 當元素B是某個祖先元素A的任意后代時，匹配形式為“ AB”的后代選擇器

Answer 4

使用.each，因為“活動”類適用於多個li。

$("#subTab").find('ul li').addClass('active');
$("#subTab").find('li.active').each(function(){
      console.log($(this).attr('id'));
});