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

这里不需要空间。当您使用空格时，选择器会将后代与active元素的li个类匹配：

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

<强> Fiddle Demo

Answer 2

简短的方法：

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

行动中：jsfiddle

Answer 3

问题是选择器中的空格。空格用于选择后代，您要求的是找到类active的元素，该元素是li的后代。

删除空格：

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

现在它要求的元素是<li>并且有active类。

来自W3C docs：

后代选择器由两个或多个由空格分隔的选择器组成。形式的后代选择器＆＃34; A B＆＃34;当元素B是某个祖先元素A
的任意后代时匹配

Answer 4

使用.each因为＆＃39;活跃＆＃39;班级适用于多个李。

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

检索具有特定类</li>的<li>元素的id

4 个答案: