คุณจะทำ jQuery hasClassกับ JavaScript ธรรมดา 'ได้อย่างไร ตัวอย่างเช่น,
<body class="foo thatClass bar">JavaScript มีวิธีการถามว่า<body>มีthatClassอะไร?
คำตอบ:
คุณสามารถตรวจสอบว่าตรงกับelement.className ตรงกับตัวแบ่งคำ/\bthatClass\b/
\b
หรือคุณสามารถใช้การดำเนินการของ jQuery ได้:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) เพื่อตอบคำถามทั่วไปของคุณเพิ่มเติมคุณสามารถดูซอร์สโค้ดของ jQuery บน github หรือที่แหล่งข้อมูลสำหรับhasClassเฉพาะในวิวเวอร์ซอร์สโค้ดนี้
rclassจริง ๆ ))
\bตรงกับ "thatClass-anotherClass" หรือไม่
/[\t\r\n\f]/gได้รับการปรับปรุงเพื่อ นอกจากนี้ยังเป็นเรื่องดีที่จะกล่าวถึงว่า/\bclass\b/ชื่อกลุ่มที่มี-เครื่องหมายลบไม่ได้ (นอกจากนั้นใช้งานได้ดี) นั่นเป็นเหตุผลว่าทำไมการติดตั้ง jQuery จึงดีขึ้นและเชื่อถือได้ ตัวอย่างเช่น: /\bbig\b/.test('big-text')คืนค่าจริงแทนที่จะเป็นเท็จที่คาดไว้
เพียงใช้classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}การใช้งานอื่น ๆ ของclassList:
document.body.classList.add('thisClass');
// $('body').addClass('thisClass');
document.body.classList.remove('thatClass');
// $('body').removeClass('thatClass');
document.body.classList.toggle('anotherClass');
// $('body').toggleClass('anotherClass');การสนับสนุนเบราว์เซอร์:
.classListเป็นสตริงได้ แต่จะไม่รู้จักวิธีการที่ทันสมัยกว่าเช่น.classList.contains()
ซับที่มีประสิทธิภาพที่สุดที่
thisClassclass="thisClass-suffix"function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}classNameแอตทริบิวต์ที่ร้านค้าชั้นเรียนในการใช้งานคือ
ดังนั้นคุณสามารถพูดได้:
if (document.body.className.match(/\bmyclass\b/)) {
....
}หากคุณต้องการตำแหน่งที่แสดงให้คุณเห็นว่า jQuery ทำทุกอย่างได้อย่างไรฉันขอแนะนำ:
matchแอตทริบิวต์มามีประโยชน์อีกครั้ง! jQuery จริง ๆ แล้วทำอะไรมากกว่าที่เป็นไปได้ใน JavaScript? ถ้าไม่ jQuery เป็นเพียงการจดชวเลขที่ไม่จำเป็น
myclass-somethingเหมือน\bจับคู่ยัติภังค์
// 1. Use if for see that classes:
if (document.querySelector(".section-name").classList.contains("section-filter")) {
alert("Grid section");
// code...
}<!--2. Add a class in the .html:-->
<div class="section-name section-filter">...</div>ฟังก์ชั่น hasClass:
HTMLElement.prototype.hasClass = function(cls) {
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] == cls) {
return true;
}
}
return false;
};ฟังก์ชั่น addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};ฟังก์ชัน removeClass:
HTMLElement.prototype.removeClass = function(remove) {
var newClassName = "";
var i;
var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] !== remove) {
newClassName += classes[i] + " ";
}
}
this.className = newClassName.trim();
};ฉันใช้โซลูชันที่เรียบง่าย / น้อยที่สุดหนึ่งบรรทัดเบราว์เซอร์ข้ามและทำงานกับเบราว์เซอร์รุ่นเก่าเช่นกัน:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'วิธีนี้ดีมากเพราะไม่ต้องใช้polyfillsและถ้าคุณใช้มันclassListมันจะดีกว่าในแง่ของประสิทธิภาพ อย่างน้อยสำหรับฉัน
อัปเดต: ฉันสร้างโปลิฟิลเล็ก ๆ ซึ่งเป็นวิธีแก้ปัญหารอบตัวที่ฉันใช้ตอนนี้:
function hasClass(element,testClass){
if ('classList' in element) { return element.classList.contains(testClass);
} else { return new Regexp(testClass).exec(element.className); } // this is better
//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill
return false;
}notmyClassHereหรือไม่?
!/myClass/.test(document.body.className)สังเกตเห็น!สัญลักษณ์
thisIsmyClassHereต้อง
ทางออกที่ดีสำหรับสิ่งนี้คือการทำงานกับ classList และมี
ฉันทำแบบนี้:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...ดังนั้นคุณต้องการองค์ประกอบของคุณและตรวจสอบรายชื่อของชั้นเรียน หากคลาสใดคลาสหนึ่งเหมือนกันกับคลาสที่คุณค้นหาจะส่งคืนค่าจริงหากไม่ใช่คลาสนั้นจะส่งคืนค่าเท็จ!
ใช้สิ่งที่ชอบ:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')หรือ คุณไม่ต้องการ>=0ในตอนท้ายด้วยหรือ
[].indexOfถ้าใช้วิธีการclassListมีจุดcontainsคืออะไร?
myHTMLSelector.classList.indexOf('the-class')ส่งกลับข้อผิดพลาดที่myHTMLSelector.classList.indexOf is not a functionเพราะmyHTMLSelector.classListไม่ใช่อาร์เรย์ แต่ฉันเดาว่าเมื่อมีการโทรโดยใช้Array.prototypeการแปลงเกิดขึ้น นี่อาจรองรับเบราว์เซอร์รุ่นเก่า แต่containsมีการสนับสนุนที่ดีมาก
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}ฟังก์ชัน 'hasClass' นี้ใช้งานได้ใน IE8 +, FireFox และ Chrome:
hasClass = function(el, cls) {
var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
target = (typeof el.className === 'undefined') ? window.event.srcElement : el;
return target.className.match(regexp);
}คำตอบข้างต้นทั้งหมดนั้นค่อนข้างดี แต่นี่เป็นฟังก์ชั่นเล็ก ๆ ที่ฉันทำขึ้น มันใช้งานได้ดีทีเดียว
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListมีcontainsวิธีคืออะไร?
คุณคิดอย่างไรเกี่ยวกับวิธีการนี้
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"หรือ?
นี่คือวิธีที่ง่ายที่สุด:
var allElements = document.querySelectorAll('*');
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute("class")) {
//console.log(allElements[i].className);
if (allElements[i].className.includes("_the _class ")) {
console.log("I see the class");
}
}
}
classคุณสมบัติ (ซึ่งในกรณีที่มีหลายคลาสจะมีชื่อคลาสหลายชื่อตามลำดับแบบสุ่มคั่นด้วยช่องว่าง) และตรวจสอบว่าชื่อคลาสของคุณอยู่ในนั้นหรือไม่ ไม่ยากมาก แต่ก็ยังไม่สะดวกอย่างมากหากไม่ใช่เพื่อการเรียนรู้ :)