Як отримати клас клацнутого елемента?


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>

ваше питання досить незрозуміле ... ви використовуєте плагін jquery?
jrharshath

Якщо це клацнув елемент, чи не слід використовувати функцію click (), щоб зв’язати подію та отримати клас? Можливо, я не зрозумів повністю питання ...
e-satis

Відповіді:


396

Ось короткий приклад jQuery, який додає подію клацання до кожного тегу "li", а потім отримує атрибут класу для клацнутого елемента. Сподіваюся, це допомагає.

$("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
"class" - невірна назва змінної.
Фред Бергман

1
Одна з тих кумедних ситуацій, коли jQuery - це довгий шлях. this.className дасть вам те саме, що $ (this) .attr ("class")
Девід Гілбертсон

що робити, якщо елемент має більше одного імені класу?
Дхарман

1
Не знаю, чому, але 2-й приклад не може отримати для мене ім'я класу. Однак 1-й приклад чудово працює! Дякую! Допомогла мені тонна. :)
Chiefwarpaint


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()


17

Для цього слід зробити фокус:

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

Для отримання додаткової інформації про ui.tab див. Http://jqueryui.com/demos/tabs/#Events


Що це означає? Чи можете ви пояснити це більше?

Це 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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.