클릭 한 요소의 클래스를 얻는 방법?

class클릭 한 요소 의 값 을 얻는 방법을 알 수 없습니다 .

아래 코드를 사용하면 매번 "node-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>

다음은 각 "li"태그에 click 이벤트를 추가 한 다음 clicked 요소의 클래스 속성을 검색하는 빠른 jQuery 예제입니다. 도움이 되길 바랍니다.

$("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+/);

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

나는이 질문을 보았으므로 조금 더 확장 할 수 있다고 생각했습니다. 이것은 @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()

트릭을 수행해야합니다.

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

ui.tab에 대한 자세한 내용은 http://jqueryui.com/demos/tabs/#Events를 참조하십시오.

제공된 모든 솔루션을 사용하면 미리 클릭 할 요소 를 알아야합니다 . 클릭 한 요소 에서 클래스를 가져 오려면 다음을 사용할 수 있습니다.

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })

$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});