Как получить класс нажатого элемента?

228

Я не могу понять, как получить classзначение выбранного элемента.

Когда я использую код ниже, я каждый раз получаю «узел-205» .

JQuery:

.find('> ul')
.tabs(
{
    selectedClass: 'active',
    select: function (event, ui) {
        //shows only the first element of list
        $(this).children('li').attr('class');
    },
    cookie: { expires: 0 },
    fx: fx
})

HTML:

<ul class="tabs">
  <li class="node-205"></li>
  <li class="node-150"></li>
  <li class="node-160"></li>
</ul>
sshow
источник
ваш вопрос довольно неясен ... вы используете какой-либо плагин jquery?
jrharshath
Если это элемент с щелчком, разве вы не должны использовать функцию click (), чтобы связать событие и получить класс? Может быть, я не полностью понял вопрос ...
E-Удовлетворительно

Ответы:

396

Вот быстрый пример jQuery, который добавляет событие click к каждому тегу "li", а затем извлекает атрибут класса для элемента clicked. Надеюсь, поможет.

$("li").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

Точно так же вам не нужно оборачивать объект в jQuery:

$("li").click(function() {
   var myClass = this.className;
   alert(myClass);
});

А в новых браузерах вы можете получить полный список имен классов :

$("li").click(function() {
   var myClasses = this.classList;
   alert(myClasses.length + " " + myClasses[0]);
});

Вы можете эмулировать classListв старых браузерах, используяmyClass.split(/\s+/);

Фентон
источник
1
«класс» не является допустимым именем переменной.
Фред Бергман
1
Одна из тех забавных ситуаций, где jQuery - долгий путь. this.className даст вам то же самое, что и $ (this) .attr ("класс")
Дэвид Гилбертсон
Что делать, если элемент имеет более одного имени класса?
Дхарман
1
Не знаю почему, но во втором примере мне не удалось получить имя класса. Тем не менее, 1-й пример прекрасно работает! Спасибо! Помог мне тонну. :)
Chiefwarpaint
38
$("li").click(function(){
    alert($(this).attr("class"));
});
Harpal
источник
28

Я видел этот вопрос, поэтому я подумал, что мог бы расширить его немного больше. Это расширение идеи, которая была у @SteveFenton. Вместо привязки clickсобытия к каждому liэлементу было бы более эффективно делегировать события ulснизу вверх.

Для jQuery 1.7 и выше

$("ul.tabs").on('click', 'li', function(e) {
   alert($(this).attr("class"));
});

Документация: .on()

Для jQuery 1.4.2 - 1.7

$("ul.tabs").delegate('li', 'click', function(e) {
   alert($(this).attr("class"));
});

Документация: .delegate()

В крайнем случае для jQuery 1.3 - 1.4

$("ul.tabs").children('li').live('click', function(e) {
   alert($(this).attr("class"));
});

или

$("ul.tabs > li").live('click', function(e) {
   alert($(this).attr("class"));
});

Документация: .live()

War10ck
источник
17

Это должно сделать трюк:

...
select: function(event, ui){ 
   ui.tab.attr('class');
} ,
...

Для получения дополнительной информации о ui.tab см http://jqueryui.com/demos/tabs/#Events

jeroen.verhoest
источник
Что это значит? Не могли бы вы объяснить это больше?
Это ui.tab вместо ui.item вам нужно использовать. Я думал, что это был ui.item.
jeroen.verhoest
11

Все предоставленные решения заставляют вас заранее знать элемент, на который вы нажмете . Если вы хотите получить класс из любого элемента, на который вы нажали, вы можете использовать:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })
кибернетический
источник
2
Следует отметить, что если получение идентификатора ненадежно, его всегда можно использовать $(e.target)вместо, $('#' + e.target.id)и jQuery все равно будет разумно обрабатывать этот случай.
BobChao87
9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Pushkraj
источник