Получите элемент с активным классом?

Question

У меня есть список. Я хочу получить элемент id, который имеет класс active.

<ul class="nav nav-tabs" id="nav"> 
    <li class="active" id="day" onclick="changeDur('day')"><a data-toggle="tab">Day</a></li> 
    <li id="week" onclick="changeDur('week')"><a data-toggle="tab">Week</a></li> 
    <li id="month" onclick="changeDur('month')"><a data-toggle="tab">Month</a></li> 
    <li id="year" onclick="changeDur('year')"><a data-toggle="tab">Year</a></li> 
</ul> 

Вот что я пытаюсь?

var period_val = $("#nav.active").attr('id'); 
alert(period_val) 

Это дает мне undefined.

Где я ошибаюсь?

Answer 1

var period_val = $("#nav .active").attr('id'); 

Для того, чтобы выбрать элементы потомства, вам нужно пространство.

Answer 2

Вы также можете использовать child selector>:

var period_val = $("#nav > .active").attr("id"); 

Answer 3

var period_val = $("#nav .active").attr('id'); - необходим пробел после «#nav», в противном случае вы ищете UL, который имеет идентификатор «нав» и класс «активный»

Ребенок-селектор, как указано выше, также будет работать.

Просто, чтобы сделать мой пост немного более полезным здесь ссылки:

CSS selectors

Additional jQuery selectors