JQuery ব্যবহার করে শ্রেণীর নাম পান


603

আমি jQuery ব্যবহার করে ক্লাসের নাম পেতে চাই

এবং যদি এটি একটি আইডি আছে

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

2
@ অমরঘোষ: সত্য, সত্য তবে আপনি যদি কিছু ট্র্যাভারসাল পদ্ধতি ব্যবহার করেন তবে আপনি আসলে এই পরিস্থিতিতে পড়তে পারেন parents()
বোল্ডউইন

8
fyi this.classNamejquery ছাড়াই কাজ করে ( "myclass"উপরের উদাহরণে ফিরে আসবে )
পিটার বার্গ

উত্তর:


1062

তার উপাদানটি বাদ দিয়ে অন্য উপায়ে jQuery অবজেক্ট হিসাবে উপাদানটি পাওয়ার পরে

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

কৌতুক করা উচিত। আইডি ব্যবহারের জন্য .attr('id')

যদি আপনি কোনও ইভেন্ট হ্যান্ডলার বা অন্যান্য jQuery পদ্ধতির ভিতরে থাকেন তবে উপাদানটি মোড়ক ছাড়াই বিশুদ্ধ ডোম নোড হয় তবে আপনি ব্যবহার করতে পারেন:

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

উভয়ই স্ট্যান্ডার্ড ডিওএম পদ্ধতি এবং সমস্ত ব্রাউজারে ভাল সমর্থিত।


7
এবং যদি এটির একটি আইডি var IDName = $ ('# id') থাকে att
এক্স

18
স্যান্ডিনো তার উত্তরে যেমন উল্লেখ করেছে, সর্বদা একাধিক শ্রেণির নাম সেট হওয়ার সম্ভাবনা থাকে। (উদাহরণস্বরূপ JQuery-UI পুরো জায়গা জুড়ে সহায়ক ক্লাস যুক্ত করে)। আপনি সর্বদা এটি ব্যবহার করে চেক করতে পারতেন if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');}
পুথেরকা

17
যদি আপনি এটি উত্সাহ অর্জন করেন .attr('class')এবং এর সাথে একত্রিত হন তবে if(className.indexOf('Class_I_am_Looking_For') > = 0)সহজেই অস্তিত্বের জন্য একটি নির্দিষ্ট শ্রেণি পরীক্ষা করতে পারেন এবং এখনও একাধিক ক্লাস পরিচালনা করতে পারেন।
রনব্ল্যাক

18
রনব্ল্যাক: if(className.indexOf('Class_I_am_Looking_For') > = 0)এছাড়াও মিলবে"This_Is_Not_the_Class_I_am_Looking_For"
লিফ নেল্যান্ড

1
সেক্ষেত্রে @ বেনারাকিকোট, কেবল স্ট্যান্ডার্ড ডিওএম পদ্ধতি ব্যবহার করুন ।
বোলডউইন

227

.hasClass()যখন আপনি কোনও উপাদানটির কোনও নির্দিষ্ট আছে কিনা তা পরীক্ষা করে দেখতে চাইলে এটি ব্যবহার করা ভাল class। এটি কারণ যখন কোনও উপাদানের একাধিক থাকে classতা চেক করা তুচ্ছ নয়।

উদাহরণ:

<div id='test' class='main divhover'></div>

কোথায়:

$('#test').attr('class');        // returns `main divhover`.

ক্লাস আছে .hasClass()কিনা তা দিয়ে আমরা পরীক্ষা করতে পারি ।divdivhover

$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main');     // returns true

13
তবে আপনি যদি ক্লাসের নাম না জানেন? ;-)
পুথারকা

10
এটা ঠিক ... আপনি যদি ক্লাসের নামটি যাচাই করে থাকেন তা জানেন তবে এটি কেবলমাত্র কার্যকর ... তবে আমার মন্তব্যটি ছিল আপনাকে ডট উপাদানটির কিছু আছে কিনা তা পরীক্ষা করার জন্য .attr ('শ্রেণি') == 'CLASSNAME_YOU_ARomoting' ব্যবহার না করার বিষয়ে সতর্ক করতে হয়েছিল বর্গ পরিবর্তে এটি .hasClass ব্যবহার করতে ভালো
sandino

4
আরেকটি উপায় ব্যবহার করা.is('.divhover')
orad

কোনও উপাদানটির ক্লাসে লুপ করা কি সম্ভব?
ফ্র্যাক্টালাইস্ট

3
হ্যাঁ এটি কেবল $ (উপাদান) .attr ("শ্রেণি") করুন split বিভক্ত (''); এবং আপনি একটি তালিকা তারপর শুধু একটি জন্য অথবা foreach লুপ ব্যবহার পেতে
sandino

38

সাবধানতা অবলম্বন করুন, সম্ভবত, আপনার একটি ক্লাস এবং একটি সাবক্লাস রয়েছে।

  <div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>

আপনি যদি পূর্ববর্তী সমাধানগুলি ব্যবহার করেন তবে আপনার কাছে রয়েছে:

myclass mysubclass

সুতরাং আপনি যদি শ্রেণি নির্বাচক থাকতে চান তবে নিম্নলিখিতগুলি করুন:

var className = '.'+$('#id').attr('class').split(' ').join('.')

এবং আপনি হবে

.myclass.mysubclass

এখন আপনি উপরের ভাগের মতো একই শ্রেণিযুক্ত সমস্ত উপাদান নির্বাচন করতে চান:

   var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))

এর মানে

var brothers=$('.myclass.mysubclass')

আপডেট 2018

অথবা ভ্যানিলা জাভাস্ক্রিপ্ট 2 লাইনে প্রয়োগ করা যেতে পারে:

  const { classList } = document.querySelector('#id');
  document.querySelectorAll(`.${Array.from(classList).join('.')}`);

6
ক্লাসগুলির মধ্যে একাধিক স্থান থাকতে পারে। আরও সঠিক ভেরিয়েন্ট var ক্লাসের নাম = '।' + $ ('# আইডি')। অ্যাট্রি ('শ্রেণি') replace ')
সুহান

3
একটা আরো সঠিক অভিব্যক্তি '.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.'), কারণ স্থান, ট্যাব, এলএফ, সি আর ও মুক্তিযোদ্ধা পৃথক শ্রেণীর অনুমতি দেওয়া হয়। ( .split()রেজিএক্সপসগুলিও গ্রহণ করে))
বোল্ডইউইন

'.'+$('#id').attr('class').split(/\s+/).join('.')আরও সংক্ষিপ্ত হবে, তাই না? বা আমি এমন কিছু মিলব যা আমি ভাবছি না?
30'15

1
নিরাপদ থাকতে এবং এই সমাধানগুলির সাথে কোনও পেছনের বিন্দু না পেতে এই জাতীয় ট্রিম যুক্ত করুন.attr('class').trim().split(...)
ক্রিশ্চিয়ান ল্যাভালি

28

এটি একটি মৌলিক উপাদান ব্যবহার করে দ্বিতীয় শ্রেণিতে একাধিক ক্লাসে প্রবেশ করা

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


11

যদি আপনার <div>একটি থাকে id:

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

...আপনি চেষ্টা করতে পারেন:

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

যদি আপনার <div>কেবলমাত্র একটি থাকে তবে classআপনি চেষ্টা করতে পারেন:

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

6

আপনি যদি শ্রেণীর নামগুলি বের করার জন্য বিভক্ত ফাংশনটি ব্যবহার করতে চলেছেন, তবে আপনাকে অপ্রত্যাশিত ফলাফলগুলি আনতে পারে এমন সম্ভাব্য বিন্যাসের বৈচিত্রের জন্য ক্ষতিপূরণ দিতে হবে। উদাহরণ স্বরূপ:

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

উত্পাদন করে

".myclass1..myclass2."

আমি মনে করি আপনি বর্গের নামের জন্য অনুমোদিত অক্ষরগুলির সেটটিতে নিয়মিত অভিব্যক্তিটি ব্যবহার করতে ভাল। উদাহরণ স্বরূপ:

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

উত্পাদন করে

["myclass1", "myclass2"]

নিয়মিত প্রকাশটি সম্ভবত সম্পূর্ণ নয় তবে আশা করি আপনি আমার বক্তব্যটি বুঝতে পেরেছেন। এই পদ্ধতির দরিদ্র বিন্যাসের সম্ভাবনা প্রশমিত করে।


6

হাইটস্টক উত্তরটি (যা আমি খুঁজে পেয়েছি তার মধ্যে সেরা) আমি সম্পূর্ণ করতে পেরেছিলাম:

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

সুতরাং "myclass1 myclass2" এর জন্য ফলাফল '.myclass1 .myclass2' হবে


5

আপনি দুটি উপায়ে ক্লাসের নাম পেতে পারেন:

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

অথবা

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

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

জাভাস্ক্রিপ্ট সহ

document.getElementById('elem').className;

JQuery সহ

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

অথবা

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

2

আপনি যদি শ্রেণীর নামটি না জানেন তবে আপনি আইডিটি জানেন তবে আপনি এটি চেষ্টা করতে পারেন:

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

তারপরে এটিকে কল করুন:

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

2

আপনি যদি ডিভের ক্লাসগুলি পেতে চান এবং তারপর কোনও ক্লাসের উপস্থিত রয়েছে কিনা তা পরীক্ষা করতে চান তবে সাধারণ ব্যবহার।

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

যেমন;

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

2

চেষ্টা করে দেখুন

এইচটিএমএল

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

0

যদি আমাদের একক থাকে বা আমরা প্রথম divউপাদানটি ব্যবহার করতে পারি

$('div')[0].classNameঅন্যথায় আমাদের idসেই উপাদানটির একটি দরকার


0

আমাদের যদি একটি কোড থাকে:

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

আমাদের খেয়াল করতে হবে যে এটি দেশীয় পদ্ধতি এলিমেন্টক্লাসনামের পরিবর্তে ক্লাসগুলির একটি তালিকা ফিরিয়ে দেবে যা সংযুক্ত ক্লাসগুলির মধ্যে কেবল প্রথম শ্রেণিতে ফিরে আসে। যেহেতু প্রায়শই উপাদানটির সাথে একাধিক শ্রেণি সংযুক্ত থাকে, তাই আমি আপনাকে এই নেটিভ পদ্ধতিটি নয় বরং এলিমেন্ট.ক্লাসলিস্ট বা উপরে বর্ণিত পদ্ধতিটি ব্যবহার না করার পরামর্শ দিই।

এর প্রথম রূপটি অ্যারে হিসাবে শ্রেণীর তালিকার একটি তালিকা ফেরত দেবে, দ্বিতীয়টি একটি স্ট্রিং হিসাবে - শ্রেণীর নাম ফাঁক দিয়ে পৃথক করা:

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

আর একটি গুরুত্বপূর্ণ নোটিশ হ'ল উভয় পদ্ধতি পাশাপাশি jQuery পদ্ধতি

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

আমরা যদি আরও অনেক সাধারণ নির্বাচক ব্যবহার করি যা আরও অনেক উপাদানকে নির্দেশ করে তবে jQuery অবজেক্টের দ্বারা ধরা প্রথম উপাদানের কেবলমাত্র শ্রেণীর তালিকার প্রত্যাবর্তন করুন। এই জাতীয় ক্ষেত্রে আমাদের উপাদানটি চিহ্নিত করতে হবে, আমরা কিছু সূচী ব্যবহার করে তার ক্লাসগুলি পেতে চাই

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

এই ক্লাসগুলির সাথে আপনার কী করা দরকার তাও এটি নির্ভর করে। আপনি যদি এই আইডি সহ উপাদানটির শ্রেণীর তালিকায় কোনও শ্রেণীর জন্য যাচাই করতে চান তবে আপনার কেবল "হ্যাডক্লাস" পদ্ধতিটি ব্যবহার করা উচিত:

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

এবং আপনি এটি উদাহরণস্বরূপ গতিশীলভাবে একটি নির্দিষ্ট পুনর্লিখন সিএসএস নিয়ম তৈরি করতে পেতে পারেন।

শুভেচ্ছা সহ



-1

জাভাস্ক্রিপ্ট বা 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];

-3

এর মতো ব্যবহার করুন: -

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

আপনি যদি এই ক্লাসটি একাধিকবার ব্যবহার করেন তবে প্রতিটি অপারেটর ব্যবহার করুন

$(".myclass").each(function (index, value) {
//do you code
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.