ฉันต้องการเรียกชื่อคลาสโดยใช้ jQuery

และถ้ามีรหัส

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

หลังจากได้รับองค์ประกอบเป็นวัตถุ jQuery ผ่านวิธีการอื่นนอกเหนือจากระดับของมันแล้ว

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

ควรทำเคล็ดลับ .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()เราสามารถทดสอบว่าdivมีชั้นเรียนdivhoverหรือไม่

$('#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

หรือสามารถใช้กับวานิลลาจาวาสคริปต์ใน 2 บรรทัด:

  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");

หากคุณจะใช้ฟังก์ชั่นแยกเพื่อแยกชื่อคลาสคุณจะต้องชดเชยรูปแบบการจัดรูปแบบที่อาจเกิดผลลัพธ์ที่ไม่คาดคิด ตัวอย่างเช่น:

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

ผลิต

".myclass1..myclass2."

ฉันคิดว่าคุณควรใช้นิพจน์ทั่วไปเพื่อจับคู่ชุดอักขระที่อนุญาตสำหรับชื่อคลาส ตัวอย่างเช่น:

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

ผลิต

["myclass1", "myclass2"]

การแสดงออกปกติอาจไม่สมบูรณ์ แต่หวังว่าคุณจะเข้าใจประเด็นของฉัน วิธีนี้ลดความเป็นไปได้ของการจัดรูปแบบที่ไม่ดี

เพื่อตอบ Whit ลูกปัดให้สมบูรณ์ (ซึ่งเป็นสิ่งที่ดีที่สุดที่ฉันพบ) ฉันทำ:

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>

ด้วย Javascript

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

เราต้องสังเกตว่ามันจะส่งคืนรายการของคลาสที่แตกต่างจากวิธีพื้นเมืององค์ประกอบ. className ที่ส่งกลับเฉพาะชั้นแรกของชั้นเรียนที่แนบมา เนื่องจากบ่อยครั้งที่องค์ประกอบมีมากกว่าหนึ่งคลาสติดอยู่กับมันฉันขอแนะนำให้คุณไม่ใช้วิธีเนทีฟนี้ แต่ใช้ element.classlist หรือวิธีที่อธิบายไว้ข้างต้น

ตัวแปรแรกของมันจะส่งคืนรายการของคลาสเป็นอาร์เรย์ส่วนที่สองเป็นชื่อสตริง - คลาสที่คั่นด้วยช่องว่าง:

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

อีกประกาศสำคัญคือว่าทั้งสองวิธีเช่นเดียวกับวิธีการ jQuery

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

ส่งคืนรายการคลาสเฉพาะขององค์ประกอบแรกที่จับโดยวัตถุ jQuery ถ้าเราใช้ตัวเลือกทั่วไปที่ชี้องค์ประกอบอื่น ๆ อีกมากมาย ในกรณีเช่นนี้เราต้องทำเครื่องหมายองค์ประกอบเราต้องการรับคลาสของเขาโดยใช้ดัชนีบางอย่างเช่น

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

ขึ้นอยู่กับสิ่งที่คุณต้องทำกับคลาสเหล่านี้ ถ้าคุณต้องการตรวจสอบคลาสในรายการคลาสขององค์ประกอบด้วยรหัสนี้คุณควรใช้เมธอด "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;

วิธีที่ดีที่สุดในการรับชื่อคลาสใน javascript หรือ 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
}