jQuery를 사용하여 클래스 이름을 가져오고 싶습니다.

그리고 ID가 있다면

<div class="myclass"></div>

클래스가 아닌 다른 수단을 통해 요소를 jQuery 객체로 가져온 후

var className = $('#sidebar div:eq(14)').attr('class');

트릭을해야합니다. ID는을 사용하십시오 .attr('id').

이벤트 핸들러 또는 다른 jQuery 메소드 내에있는 경우 요소가 랩퍼가없는 순수한 DOM 노드 인 경우 다음을 사용할 수 있습니다.

this.className // for classes, and
this.id // for IDs

둘 다 표준 DOM 메소드이며 모든 브라우저에서 잘 지원됩니다.

.hasClass()요소에 특정 요소가 있는지 확인하려는 경우 사용하는 것이 좋습니다 class. 요소가 여러 개일 때 class확인하기가 쉽지 않기 때문 입니다.

예:

<div id='test' class='main divhover'></div>

어디:

$('#test').attr('class');        // returns `main divhover`.

로 클래스가 .hasClass()있는지 테스트 할 수 있습니다 .divdivhover

$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main');     // returns true

조심해야 할 것입니다. 아마도 클래스와 하위 클래스가있을 것입니다.

  <div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>

이전 솔루션을 사용하면 다음과 같은 이점이 있습니다.

myclass mysubclass

따라서 클래스 선택기 를 사용하려면 다음을 수행하십시오.

var className = '.'+$('#id').attr('class').split(' ').join('.')

그리고 당신은 할 것이다

.myclass.mysubclass

이제 위의 div와 같은 클래스를 가진 모든 요소를 ​​선택하려면 다음을 수행하십시오.

   var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))

그 의미는

var brothers=$('.myclass.mysubclass')

2018 업데이트

또는 두 줄로 바닐라 자바 ​​스크립트로 구현할 수 있습니다.

  const { classList } = document.querySelector('#id');
  document.querySelectorAll(`.${Array.from(classList).join('.')}`);

이것은 요소를 사용하여 두 번째 클래스를 여러 클래스로 가져 오는 것입니다.

var class_name = $('#videobuttonChange').attr('class').split(' ')[1];

간단하게 사용할 수 있습니다.

var className = $('#id').attr('class');

당신이 만약 <div>있다 id:

​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

...당신은 시도 할 수 있습니다:

var yourClass = $("#test").prop("class");

에 ( <div>이) 만있는 class경우 다음을 시도해보십시오.

var yourClass = $(".my-custom-class").prop("class");

split 함수를 사용하여 클래스 이름을 추출하려는 경우 예상치 못한 결과를 초래할 수있는 잠재적 인 서식 변형을 보상해야합니다. 예를 들면 다음과 같습니다.

" myclass1  myclass2 ".split(' ').join(".")

생산

".myclass1..myclass2."

클래스 이름에 허용되는 문자 세트와 일치시키기 위해 정규 표현식을 사용하는 것이 좋습니다. 예를 들면 다음과 같습니다.

" myclass1  myclass2  ".match(/[\d\w-_]+/g);

생산

["myclass1", "myclass2"]

정규식은 아마도 완전하지는 않지만 내 요점을 이해하기를 바랍니다. 이 방법은 서식이 잘못 될 가능성을 완화합니다.

Whitestock 답변을 완료하려면 (내가 찾은 최고) :

className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');

그래서 위해 "myclass1 MyClass2의" 결과가 될 것 '.myclass1 .myclass2'

두 가지 방법으로 클래스 이름을 얻을 수 있습니다.

var className = $('.myclass').attr('class');

또는

var className = $('.myclass').prop('class');

<div id="elem" class="className"></div>

자바 스크립트

document.getElementById('elem').className;

jQuery로

$('#elem').attr('class');

또는

$('#elem').get(0).className;

클래스 이름을 모르는 경우 ID를 알고 있으면 다음을 시도 할 수 있습니다.

<div id="currentST" class="myclass"></div>

그런 다음 다음을 사용하여 호출하십시오.

alert($('#currentST').attr('class'));

div 클래스를 가져오고 클래스가 있는지 확인하려면 간단한 사용하십시오.

if ( $('#div-id' ).hasClass( 'classname' ) ) {
    // do something...
}

예를 들어;

if ( $('body').hasClass( 'home' ) ) {
    $('#menu-item-4').addClass('active');
}

시도 해봐

HTML

<div class="class_area-1">
    area 1
</div>

<div class="class_area-2">
    area 2
</div>

<div class="class_area-3">
    area 3
</div>

jQuery

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
    $('div').click(function(){
        alert($(this).attr('class'));
    });
</script>

단일 div요소가 있거나 첫 번째 요소를 원하면 사용할 수 있습니다

$('div')[0].className그렇지 않으면 우리 id는 그 요소 중 하나가 필요합니다

코드가 있다면 :

<div id="myDiv" class="myClass myClass2"></div> 

jQuery를 사용하여 클래스 이름을 가져 오기 위해 간단한 플러그인 메소드를 정의하고 사용할 수 있습니다.

$.fn.class = function(){
  return Array.prototype.slice.call( $(this)[0].classList );
}

또는

 $.fn.class = function(){
   return $(this).prop('class');
 } 

이 방법의 사용은 다음과 같습니다.

$('#myDiv').class();

연결된 클래스의 첫 번째 클래스 만 반환하는 네이티브 메서드 element.className과 달리 클래스 목록을 반환한다는 점에 유의해야합니다. 요소에 하나 이상의 클래스가 연결되어있는 경우가 많으므로이 기본 메소드를 사용하지 말고 element.classlist 또는 위에서 설명한 메소드를 사용하는 것이 좋습니다.

첫 번째 변형은 클래스 목록을 배열로 반환하고 두 번째는 문자열로 클래스 이름을 공백으로 구분하여 반환합니다.

// [myClass, myClass2]
// "myClass myClass2"

또 다른 중요한 통지는 jQuery 메소드뿐만 아니라 두 메소드 모두

$('div').prop('class');

다른 많은 요소를 가리키는 더 일반적인 선택기를 사용하는 경우 jQuery 객체가 잡은 첫 번째 요소의 클래스 목록 만 반환하십시오. 이 경우 요소를 표시해야하며 인덱스를 사용하여 클래스를 가져옵니다.

$('div:eq(2)').prop('class');

또한 이러한 클래스로 무엇을해야하는지에 따라 다릅니다. 이 ID를 가진 요소의 클래스 목록에서 클래스를 확인하려면 "hasClass"메소드를 사용해야합니다.

if($('#myDiv').hasClass('myClass')){
   // do something
}

위의 의견에서 언급했듯이. 그러나 모든 클래스를 선택 자로 사용하려면 다음 코드를 사용하십시오.

$.fn.classes = function(){
   var o = $(this);
   return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
 } 

 var mySelector = $('#myDiv').classes();

결과는 다음과 같습니다.

// .myClass.myClass2

예를 들어 특정 재 작성 CSS 규칙을 동적으로 만들 수 있습니다.

문안 인사

이것도 작동합니다.

const $el = $(".myclass");
const className = $el[0].className;

자바 스크립트 또는 jquery에서 클래스 이름을 얻는 가장 좋은 방법

attr() 속성 함수는 속성을 가져오고 설정하는 데 사용됩니다.

수업 받기

jQuery('your selector').attr('class');  // Return class

수업이 있는지 확인

The hasClass() method checks if any of the selected elements have a specified class name.

 if(jQuery('selector').hasClass('abc-class')){
        // Yes Exist
    }else{
        // NOt exists
    }

클래스 설정

jQuery('your selector').attr('class','myclass');  // It will add class to your selector

jQuery를 사용하여 클릭시 클래스 가져 오기

jQuery(document).on('click','button',function(){
     var myclass = jQuery('#selector').attr('class');
});

jQuery를 사용하여 선택기에 클래스가없는 경우 클래스 추가

if ( $('#div-id' ).hasClass( 'classname' ) ) {
        // Add your code
    }

요소를 사용하여 두 번째 클래스를 여러 클래스로 가져 오기

Change array position in place of [1] to get particular class.

var mysecondclass = $('#mydiv').attr('class').split(' ')[1];

다음과 같이 사용하십시오 :-

$(".myclass").css("color","red");

이 클래스를 두 번 이상 사용한 경우 각 연산자를 사용하십시오.

$(".myclass").each(function (index, value) {
//do you code
}