Как вернуть несколько классов CSS с помощью метода .attr()?

Question

У меня есть список, в котором элементы списка имеют несколько классов CSS, такие как:

<li class="nav-all active"><a href="#">All</a></li> 

Я пытаюсь использовать JQuery, чтобы вытащить эту информацию в строку по щелчку:

var navButtons = $(".nav li"); 
navButtons.click(function() { 
var category = $(this).attr('class'); 
//Do more stuff here 
}); 

Однако , Я получаю только первый класс, а не полную строку, которая в этом примере будет "nav-all active". Является ли это предполагаемой функциональностью? Я не вижу ничего такого поведения в API. Кроме того, есть ли способ изменить вызов .attr, чтобы получить полный результат или this.className здесь единственный вариант?

Редактировать: Спасибо за помощь, всем. Я основал образец кода в этом вопросе на более крупном скрипте, который динамически применял второй класс, и оказалось, что я вызывал .attr в тот момент, когда li имел только один класс, поэтому я получил правильный результат. Увидев скрипку, которую поделил @Barmar, мне помогли установить соединение, поэтому я предполагаю, что вынос - это тестирование небольших бит в изоляции.

Answer 1

Вы можете просто получить его, используя this.classList, который вернет вам массив, такой как список.

var navButtons = $(".nav li"); 
navButtons.click(function() { 
var category = this.classList; 
category[0];// => "nav-all" 
//Do more stuff here 
}); 

Более подробную информацию о tokenList https://developer.mozilla.org/en/docs/Web/API/DOMTokenList

Answer 2

Я просто раздвоение класс вроде этого:

var category = $(this).attr('class').split(' ')[0]; 

Fiddle