Patikrinkite, ar elementas turi klasę?

Naudojant paprastą „javascript“ (ne „jQuery“), ar galima patikrinti, ar elementas turi klasę?

Šiuo metu tai darau:

HTML:

 <div id="test" class="class1"></div>; 

Js:

 var test = document.getElementById("test"); var testClass = test.className; switch(testClass){ case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "class4": test.innerHTML = "I have class4"; break; default: test.innerHTML = ""; } 

Rezultatas yra toks:

 I have class1 

Problema ta, kad jei pakeisiu HTML į šį ...

 <div id="test" class="class1 class5"></div> 

... nebėra tikslios atitikties, todėl gaunu numatytąjį išvestį ( "" ). Bet vis tiek noriu, kad rezultatas būtų I have class1 klasė, nes <div> vis dar yra .class1 .

236
05 мая '11 в 16:40 2011-05-05 16:40 daGUY yra nustatytas gegužės 05 '11, 16:40 2011-05-05 16:40
@ 19 atsakymų

Naudokite .contains

 element.classList.contains(class); 

Tai veikia visose esamose naršyklėse ir yra politikos, kuria remiamos senesnės naršyklės.


Arba , jei dirbate su senomis naršyklėmis ir nenorite naudoti jų indexOf taisyklių, naudokite „ indexOf yra teisingas, tačiau jums reikia šiek tiek pakoreguoti:

 function hasClass(element, class) { return (' ' + element.className + ' ').indexOf(' ' + class+ ' ') > -1; } 

Priešingu atveju, jūs taip pat būna true jei klasė, kurią ieškote, yra kitos klasės pavadinimo dalis.

Demo

jQuery naudoja panašų (jei ne tą patį) metodą.


Taikomas pavyzdžiui:

Kadangi tai neveikia jungiklio ataskaitoje, tą patį efektą galite pasiekti naudodami šį kodą:

 var test = document.getElementById("test"), classes = ['class1', 'class2', 'class3', 'class4']; test.innerHTML = ""; for(var i = 0, j = classes.length; i < j; i++) { if(hasClass(test, classes[i])) { test.innerHTML = "I have " + classes[i]; break; } } 

Jis taip pat yra mažesnis;)

391
05 мая '11 в 16:46 2011-05-05 16:46 atsakymą pateikė Felixas Klingas gegužės 05d. 11, 16:46 2011-05-05 16:46

Paprastas ir efektyvus sprendimas bando naudoti.

 test.classList.contains(testClass); 
65
28 мая '15 в 16:14 2015-05-28 16:14 atsakymą pateikė kūrėjas gegužės 28, 15, 16:14 2015-05-28 16:14

Šiuolaikinėse naršyklėse galite naudoti Element.classList metodą:

 testElement.classList.contains(className) 

Demo

 <div id="test" class="main main-content content"></div> 

Palaikomos naršyklės

2019

20 янв. John Slegers atsakymas dėl sausio 20 d 2016-01-20 23:54 '16 at 11:54 pm 2016-01-20 23:54

Kadangi jis nori naudoti jungiklį (), esu nustebęs, kad niekas to nepadarė:

 var test = document.getElementById("test"); var testClasses = test.className.split(" "); test.innerHTML = ""; for(var i=0; i<testClasses.length; i++) { switch(testClasses[i]) { case "class1": test.innerHTML += "I have class1<br/>"; break; case "class2": test.innerHTML += "I have class2<br/>"; break; case "class3": test.innerHTML += "I have class3<br/>"; break; case "class4": test.innerHTML += "I have class4<br/>"; break; default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>"; } } 
8
18 мая '12 в 0:33 2012-05-18 00:33 atsakymas pateikiamas minties Gegužės 18 d., 12 val. 0:33 2012-05-18 00:33

Supaprastintas antgalis: 1

 function hasClassName(classname,id) { return String ( ( document.getElementById(id)||{} ) .className ) .split(/\s/) .indexOf(classname) >= 0; } 

1 indexOf nepalaikomas IE (žinoma). Norėdami tai padaryti, beždžionėms yra daug pleistrų.

5
05 мая '11 в 17:31 2011-05-05 17:31 atsakymą pateikė „ KooiInc “ gegužės 05d . 11 d. 17:31 2011-05-05 17:31

Tai šiek tiek senas, bet gal kas nors mano, kad mano sprendimas bus naudingas:

 // Fix IE indexOf Array if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (searchElement) { if (this == null) throw new TypeError(); var t = Object(this); var len = t.length >>> 0; if (len === 0) return -1; var n = 0; if (arguments.length > 0) { n = Number(arguments[1]); if (n != n) n = 0; else if (n != 0  n != Infinity  n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n)); } if (n >= len) return -1; var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); for (; k < len; k++) if (k in t  t[k] === searchElement) return k; return -1; } } // add hasClass support if (!Element.prototype.hasClass) { Element.prototype.hasClass = function (classname) { if (this == null) throw new TypeError(); return this.className.split(' ').indexOf(classname) === -1 ? false : true; } } 
5
28 июня '12 в 15:12 2012-06-28 15:12 Atsakymą dementas pateikia birželio 12 d. 12 val. 2012-12-28 15:12

className yra tik eilutė, todėl galite naudoti įprastą rodyklės funkciją, kad sužinotumėte, ar klasių sąraše yra kita eilutė.

3
05 мая '11 в 16:43 2011-05-05 16:43 Atsakymą davė Dovydas gegužės 05d. 11, 16:43 2011-05-05 16:43

Aš sukūriau metodo prototipą, kuris, jei įmanoma, naudoja classList , ir kurortas prie indexOf :

 <p class='ab c'>This is a <b>test</b> string</p> <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> <text x="10" y="20" class='a'>SVG Text Example</text> </svg> 

bandomasis puslapis

2
14 окт. atsakymas pateikiamas vsync 14 okt. 2014-10-14 16:48 '14, 16:48, 2014-10-14 16:48

Čia yra nedidelis fragmentas. Jei bandote patikrinti, ar elemento elemente yra klasė, nenaudojant jQuery.

<i>

 function hasClass(element, className) { return element.className  new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className); } 

Tai paaiškina faktą, kad elemente gali būti keli klasės pavadinimai, atskirti tarpais.

Or


Šią funkciją galite priskirti ir prototipo elementui.

<i>

 Element.prototype.hasClass = function(className) { return this.className  new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); }; 

Ir suaktyvinkite tai (panašiai kaip funkcija jQuerys.hasClass ()):

 document.getElementById('MyDiv').hasClass('active'); 

2
28 мая '15 в 12:13 2015-05-28 12:13 atsakė Keval Bhatt gegužės 15 d., 15 val. 12:13 2015-05-28 12:13

Žinau daug atsakymų, tačiau dauguma jų skirtos papildomoms funkcijoms ir papildomoms klasėms. Tai aš asmeniškai naudoju; Daug švaresnių ir mažiau kodų!

 if( document.body.className.match('category-page') ) { console.log('yes'); } 
2
21 дек. Atsakymą pateikė TheBlackBenzKid . 2015-12-21 10:58 '15, 10:58, 2015-12-21 10:58

Čia yra nejautrus trivialus sprendimas:

 function hasClass(element, classNameToTestFor) { var classNames = element.className.split(' '); for (var i = 0; i < classNames.length; i++) { if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) { return true; } } return false; } 
2
05 мая '11 в 16:57 2011-05-05 16:57 Atsakymą davė Andersas Fjeldstadas gegužės 05d . 11, 16:57 2011-05-05 16:57

Manau, idealus sprendimas būtų tai

 if ($(this).hasClass("your_Class")) alert("positive"); else alert("Negative"); 
1
06 янв. atsakymas pateikiamas AKS 06 jan. 2014-01-06 12:17 '14 at 12:17 2014-01-06 12:17
  • „Felix“ triukas su žymių >

  • Jei norite elgtis skirtingai pagal klasę, galite naudoti nuorodas į žemėlapio funkcijas ar funkcijas:

     function fn1(element){  } function fn2(element){  } function fn2(element){  } var fns={'class1': fn1, 'class2': fn2, 'class3': fn3}; for(var i in fns) { if(hasClass(test, i)) { fns[i](test); } } 
    • už (var i į fns) pakartoja per fns žemėlapio raktus.
    • Be pertraukos, po fnsi leidžia jums atlikti kodą, kai yra atitikimas, todėl, jei elementas turi fi, class1 ir class2, bus vykdomi ir fn1, ir fn2.
    • Šio požiūrio pranašumas yra tas, kad kiekvienai klasei skirtas kodas yra savavališkas, kaip ir tas, kuris yra pateikiamas perjungimo ataskaitoje; jūsų pavyzdyje, visi atvejai atliko panašią operaciją, bet rytoj jums gali tekti daryti skirtingus dalykus kiekvienam.
    • Galite modeliuoti numatytąjį atvejį, nurodydami būsenos kintamąjį, rodantį, ar rungtynės buvo rastos kilpoje, ar ne.
1
05 мая '11 в 19:40 2011-05-05 19:40 atsakymą įteikė entonio gegužės 05 d. 11 val. 19.40.2011-05-05 19:40

Jei elementas turi tik vieną klasės pavadinimą, galite greitai jį patikrinti, gaudami klasės atributą. Kiti atsakymai yra daug patikimesni, tačiau tai tikrai turi precedentų.

 if ( element.getAttribute('class') === 'classname' ) { } 
1
17 янв. Atsakymą pateikė Brandon Brule 17 sausis 2015-01-17 23:31 '15, 23:31 pm 2015-01-17 23:31

Norėčiau, kad „Poly“ užpildytų „ClassList“ funkcionalumą ir naudotų naują sintaksę. Taigi naujoji naršyklė naudoja naują diegimą (kuris yra daug greičiau), o tik senosios naršyklės gaus kodą.

https://github.com/remy/polyfills/blob/master/classList.js

1
15 янв. Atsakymą pateikė Eric Young sausio 15 d 2014-01-15 22:05 '14, 10:05 val. 2014-01-15 22:05

Tai neveikia šiek tiek, bet jei turite įvykį, kuris sukelia jungiklį, galite tai padaryti be klasių:

 <div id="classOne1"></div> <div id="classOne2"></div> <div id="classTwo3"></div> 

Jūs galite tai padaryti

 $('body').click( function() { switch ( this.id.replace(/[0-9]/g, '') ) { case 'classOne': this.innerHTML = "I have classOne"; break; case 'classTwo': this.innerHTML = "I have classTwo"; break; default: this.innerHTML = ""; } }); 

.replace(/[0-9]/g, '') pašalina skaitmenis iš id .

Šiek tiek nulaužtas, bet veikia ilgiems jungikliams be papildomų funkcijų ar ciklų.

0
19 июля '17 в 12:58 2017-07-19 12:58 Atsakymą pateikė Artūras Tarasovas liepos 17 d. 17 val. 12:58 2017-07-19 12:58

Kur yra „.bar“ klasė? Čia yra dar vienas sprendimas, bet tai priklauso nuo jūsų.

 var reg = /Image/g, // regexp for an image element query = document.querySelector('.bar'); // returns [object HTMLImageElement] query += this.toString(); // turns object into a string if (query.match(reg)) { // checks if it matches alert('the class .bar is attached to the following Element:\n' + query); } 

jsfiddle demo

Žinoma, tai tik 1 <img> elemento ( /Image/g ) paieška, bet viską galite įdėti į masyvą, pavyzdžiui <li> yra /LI/g , <ul> = /UL/g ir tt

0
06 июля '16 в 0:05 2016-07-06 00:05 atsakymą pateikė Thielicious liepos 06 d. 16 d. 0:05 2016-07-06 00:05

Žiūrėkite „Codepen“ nuorodą, kad galėtumėte greitai ir lengvai patikrinti elementą, jei jis turi tam tikrą klasę, naudojant vanilės „JavaScript“ ~!

hasClass (Vanilla JS)

function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; }

0
02 окт. atsakymą pateikė Jefsama 02 Oct 2017-10-02 06:58 '17 at 6:58 am 2017-10-02 06:58

Pabandykite atlikti šiuos veiksmus:

 document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\b'); var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; }; 
0
05 мая '11 в 16:48 2011-05-05 16:48 atsakymas pateikiamas jimy 05 gegužės 11 d. 16:48 2011-05-05 16:48

Peržiūrėkite kitus klausimus apie „ žymes arba Užduoti klausimą