ตรวจสอบว่าองค์ประกอบมีระดับ CSS กับ jQuery

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

ฉันมีรหัสขององค์ประกอบและคลาส CSS ที่ฉันกำลังมองหา ฉันแค่ต้องสามารถในคำสั่ง if ทำการเปรียบเทียบตามการมีอยู่ของคลาสนั้นในองค์ประกอบ

ใช้hasClassวิธีการ:

jQueryCollection.hasClass(className);

หรือ

$(selector).hasClass(className);

อาร์กิวเมนต์คือ (เห็นได้ชัด) สตริงที่แทนคลาสที่คุณกำลังตรวจสอบและมันส่งคืนบูลีน (ดังนั้นจึงไม่สนับสนุนการผูกมัดเหมือนกับวิธี jQuery ส่วนใหญ่)

หมายเหตุ:ถ้าคุณผ่านการclassNameโต้แย้งที่มีช่องว่างมันจะถูกจับคู่กับclassNameสตริงขององค์ประกอบคอลเลกชัน ตัวอย่างเช่นถ้าคุณมีองค์ประกอบ

<span class="foo bar" />

จากนั้นจะส่งคืนtrue:

$('span').hasClass('foo bar')

และสิ่งเหล่านี้จะกลับมาfalse:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

จากคำถามที่พบบ่อย

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

หรือ:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}

สำหรับการปฏิเสธหากคุณต้องการทราบว่าองค์ประกอบไม่มีคลาสคุณสามารถทำตามที่มาร์คได้กล่าวไว้

if (!currentPage.parent().hasClass('home')) { do what you want }

ไม่มี jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

หรือ:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

นี่คือวิธีเร็วกว่า jQuery!

เพื่อประโยชน์ในการช่วยเหลือทุกคนที่ลงจอดที่นี่ แต่จริงๆแล้วกำลังมองหาวิธีการทำ jQuery ฟรี:

element.classList.contains('your-class-name')

ตรวจสอบหน้าคำถามที่พบบ่อยอย่างเป็นทางการของ jQuery:

ฉันจะทดสอบได้อย่างไรว่าองค์ประกอบมีคลาสเพติกหรือไม่

 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});

ในกรณีของฉันฉันใช้ 'คือ' ฟังก์ชั่น jQuery ฉันมีองค์ประกอบ HTML ที่เพิ่มคลาส css ที่แตกต่างกันฉันกำลังมองหาคลาสเฉพาะในช่วงกลางเหล่านี้ดังนั้นฉันจึงใช้ "เป็น" ทางเลือกที่ดีในการตรวจสอบ ชั้นเพิ่มแบบไดนามิกในองค์ประกอบ html ซึ่งมีชั้นเรียน CSS อื่น ๆ แล้วมันเป็นอีกทางเลือกที่ดี

ตัวอย่างง่ายๆ:

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

ตัวอย่างขั้นสูง:

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }