JQuery का उपयोग करके वर्ग नाम प्राप्त करें

Question

मैं jQuery का उपयोग करके वर्ग नाम प्राप्त करना चाहता हूं

और अगर इसकी एक आई.डी.

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

Comments

@Amarghosh: सच, सच, लेकिन आप वास्तव में इस स्थिति में आ सकते हैं, अगर आप कुछ ट्रावरल विधियों का उपयोग करते हैं parents()।

— Boldewyn

फीकी this.classNamejquery के बिना काम करता है ( "myclass"ऊपर के उदाहरण में वापस आ जाएगा )

— पीटर बर्ग

Answer 1

अपने वर्ग की तुलना में अन्य साधनों के माध्यम से jQuery वस्तु के रूप में तत्व प्राप्त करने के बाद, फिर

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

चाल चलनी चाहिए। आईडी उपयोग के लिए .attr('id')।

यदि आप किसी ईवेंट हैंडलर या अन्य jQuery विधि के अंदर हैं, जहाँ तत्व बिना आवरण के शुद्ध DOM नोड है, तो आप इसका उपयोग कर सकते हैं:

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

दोनों मानक डोम तरीके हैं और सभी ब्राउज़रों में अच्छी तरह से समर्थित हैं।

Comments

और अगर इसकी एक ID ID IDName = $ ('# id') है। attr ('id');

— X10nD

जैसा कि सैंडिनो अपने जवाब में बताते हैं, हमेशा एक से अधिक वर्ग नाम सेट होने की संभावना होती है। (उदाहरण के लिए, JQuery-UI सभी जगह सहायक कक्षाएं जोड़ता है)। आप हमेशा इसके लिए जाँच कर सकते हैं if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');}

— पर्ट्का

यदि आप इसका लाभ उठाते हैं .attr('class')और इसे अपने साथ जोड़ते हैं, if(className.indexOf('Class_I_am_Looking_For') > = 0)तो आप आसानी से एक विशिष्ट वर्ग के अस्तित्व की जांच कर सकते हैं और फिर भी कई वर्गों को संभाल सकते हैं।

— रॉनब्लैक

RonnBlack: if(className.indexOf('Class_I_am_Looking_For') > = 0)भी मैच होगा"This_Is_Not_the_Class_I_am_Looking_For"

— Leif Neland

उस मामले में @BenRacicot, बस मानक DOM विधियों का उपयोग करें ।

— बोल्डविन

Answer 2

.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

Comments

लेकिन अगर आपको classname नहीं पता है तो क्या होगा ? ;-)

— पर्ट्का

यह सही है ... यह केवल तब उपयोगी होता है जब आप उस वर्गनाम को जानते हैं, जिसकी आप जाँच कर रहे हैं ... लेकिन मेरी टिप्पणी आपको उपयोग करने के लिए सचेत नहीं करने के लिए थी। अगर कोई डोम तत्व है तो जाँचने के लिए। क्लास के बजाय इसका उपयोग करना बेहतर है। .hasClass

— सैंडिनो

दूसरा तरीका यह है कि.is('.divhover')

— orad

क्या किसी तत्व के वर्गों पर लूप करना संभव है?

— 15

हाँ यह सिर्फ $ (तत्व) (.attr ("वर्ग") है। विभाजन (''); और आप एक सूची तो सिर्फ एक के लिए या foreach पाश का उपयोग मिलता है

— Sandino

Answer 3

सावधान रहें, शायद, आपके पास एक वर्ग और एक उपवर्ग है।

  <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('.')}`);

Comments

कक्षाओं के बीच एक से अधिक स्थान हो सकते हैं। अधिक सही रूपांतर var className = '।' + $ ('# id')। Attr ('class')। प्रतिस्थापित करें (/ + (=? = / G, '')। विभाजन ('') .join (')। ')

— सुहान २६'१३

एक और भी सही अभिव्यक्ति है '.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.'), क्योंकि अंतरिक्ष, टैब, एलएफ, सीआर और एफएफ को अलग-अलग वर्गों की अनुमति है। ( .split()भी regexps स्वीकार करता है।)

— Boldewyn

'.'+$('#id').attr('class').split(/\s+/).join('.')अधिक संक्षिप्त होगा, है ना? या कि कुछ के बारे में मैं नहीं सोच रहा हूँ मैच होगा?

— लॉस्टहिसिंड

सुरक्षित होने के लिए और किसी भी अनुगामी डॉट को प्राप्त नहीं करने के लिए, इनमें से किसी भी समाधान के साथ, इस तरह एक ट्रिम जोड़ें.attr('class').trim().split(...)

— क्रिश्चियन लावेल्ले

Answer 4

यह एक तत्व का उपयोग करके कई वर्गों में दूसरी कक्षा प्राप्त करना है

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

Answer 5

आप बस उपयोग कर सकते हैं,

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

Answer 6

यदि आपके <div>पास एक id:

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

...तुम कोशिश कर सकते हो:

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

---

यदि आपके <div>पास केवल एक है class, तो आप कोशिश कर सकते हैं:

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

Answer 7

यदि आप वर्ग नामों को निकालने के लिए विभाजन फ़ंक्शन का उपयोग करने जा रहे हैं, तो आप संभावित स्वरूपण विविधताओं के लिए क्षतिपूर्ति करने जा रहे हैं जो अप्रत्याशित परिणाम उत्पन्न कर सकते हैं। उदाहरण के लिए:

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

पैदा करता है

".myclass1..myclass2."

मुझे लगता है कि आप वर्ग नामों के लिए स्वीकार्य पात्रों के सेट पर मिलान करने के लिए एक नियमित अभिव्यक्ति का उपयोग करके बेहतर हैं। उदाहरण के लिए:

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

पैदा करता है

["myclass1", "myclass2"]

नियमित अभिव्यक्ति शायद पूरी नहीं हुई है, लेकिन उम्मीद है कि आप मेरी बात समझेंगे। यह दृष्टिकोण खराब प्रारूपण की संभावना को कम करता है।

Answer 8

व्हाट्सएप को पूरा करने के लिए (जो मुझे सबसे अच्छा लगता है) मैंने किया:

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

तो "myclass1 myclass2" के लिए परिणाम '.myclass1 .myclass2' होगा।

Answer 9

आप दो तरीकों से वर्ग नाम प्राप्त कर सकते हैं:

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

या

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

Answer 10

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

जावास्क्रिप्ट के साथ

document.getElementById('elem').className;

JQuery के साथ

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

या

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

Answer 11

यदि आपको पता नहीं है कि वर्ग का नाम BUT है, तो आप उस आईडी को जान सकते हैं, जिसे आप आजमा सकते हैं:

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

फिर इसका उपयोग करके कॉल करें:

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

Answer 12

यदि आप डिव की कक्षाएं प्राप्त करना चाहते हैं और फिर यह जांचना चाहते हैं कि क्या कोई वर्ग मौजूद है तो सरल उपयोग।

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

जैसे;

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

Answer 13

कोशिश करो

एचटीएमएल

<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>

Answer 14

यदि हमारे पास एकल है या हम पहला divतत्व चाहते हैं तो हम उपयोग कर सकते हैं

$('div')[0].classNameअन्यथा हमें idउस तत्व की आवश्यकता है

Answer 15

अगर हमारे पास एक कोड है:

<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 जो संलग्न कक्षाओं के केवल पहले वर्ग को लौटाता है। क्योंकि अक्सर तत्व में एक से अधिक वर्ग जुड़े होते हैं, इसलिए मैं आपको सलाह देता हूं कि आप इस मूल विधि का उपयोग न करें बल्कि ऊपर बताए गए तत्व .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

और आप इसे गतिशील रूप से एक विशिष्ट पुनर्लेखन सीएसएस नियम बनाने के लिए प्राप्त कर सकते हैं।

सादर

Answer 16

यह भी काम करता है।

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

Answer 17

जावास्क्रिप्ट या 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];

Answer 18

इस तरह का उपयोग करें: -

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

यदि आपने एक से अधिक बार इस वर्ग का उपयोग किया है तो प्रत्येक ऑपरेटर का उपयोग करें

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