আমি jQuery ব্যবহার করে ক্লাসের নাম পেতে চাই
এবং যদি এটি একটি আইডি আছে
<div class="myclass"></div>
this.className
jquery ছাড়াই কাজ করে ( "myclass"
উপরের উদাহরণে ফিরে আসবে )
আমি jQuery ব্যবহার করে ক্লাসের নাম পেতে চাই
এবং যদি এটি একটি আইডি আছে
<div class="myclass"></div>
this.className
jquery ছাড়াই কাজ করে ( "myclass"
উপরের উদাহরণে ফিরে আসবে )
উত্তর:
তার উপাদানটি বাদ দিয়ে অন্য উপায়ে jQuery অবজেক্ট হিসাবে উপাদানটি পাওয়ার পরে
var className = $('#sidebar div:eq(14)').attr('class');
কৌতুক করা উচিত। আইডি ব্যবহারের জন্য .attr('id')
।
যদি আপনি কোনও ইভেন্ট হ্যান্ডলার বা অন্যান্য jQuery পদ্ধতির ভিতরে থাকেন তবে উপাদানটি মোড়ক ছাড়াই বিশুদ্ধ ডোম নোড হয় তবে আপনি ব্যবহার করতে পারেন:
this.className // for classes, and
this.id // for IDs
উভয়ই স্ট্যান্ডার্ড ডিওএম পদ্ধতি এবং সমস্ত ব্রাউজারে ভাল সমর্থিত।
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)
সহজেই অস্তিত্বের জন্য একটি নির্দিষ্ট শ্রেণি পরীক্ষা করতে পারেন এবং এখনও একাধিক ক্লাস পরিচালনা করতে পারেন।
if(className.indexOf('Class_I_am_Looking_For') > = 0)
এছাড়াও মিলবে"This_Is_Not_the_Class_I_am_Looking_For"
.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
.is('.divhover')
সাবধানতা অবলম্বন করুন, সম্ভবত, আপনার একটি ক্লাস এবং একটি সাবক্লাস রয়েছে।
<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')
অথবা ভ্যানিলা জাভাস্ক্রিপ্ট 2 লাইনে প্রয়োগ করা যেতে পারে:
const { classList } = document.querySelector('#id');
document.querySelectorAll(`.${Array.from(classList).join('.')}`);
'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.')
, কারণ স্থান, ট্যাব, এলএফ, সি আর ও মুক্তিযোদ্ধা পৃথক শ্রেণীর অনুমতি দেওয়া হয়। ( .split()
রেজিএক্সপসগুলিও গ্রহণ করে))
'.'+$('#id').attr('class').split(/\s+/).join('.')
আরও সংক্ষিপ্ত হবে, তাই না? বা আমি এমন কিছু মিলব যা আমি ভাবছি না?
.attr('class').trim().split(...)
আপনি কেবল ব্যবহার করতে পারেন,
var className = $('#id').attr('class');
যদি আপনার <div>
একটি থাকে id
:
<div id="test" class="my-custom-class"></div>
...আপনি চেষ্টা করতে পারেন:
var yourClass = $("#test").prop("class");
যদি আপনার <div>
কেবলমাত্র একটি থাকে তবে class
আপনি চেষ্টা করতে পারেন:
var yourClass = $(".my-custom-class").prop("class");
আপনি যদি শ্রেণীর নামগুলি বের করার জন্য বিভক্ত ফাংশনটি ব্যবহার করতে চলেছেন, তবে আপনাকে অপ্রত্যাশিত ফলাফলগুলি আনতে পারে এমন সম্ভাব্য বিন্যাসের বৈচিত্রের জন্য ক্ষতিপূরণ দিতে হবে। উদাহরণ স্বরূপ:
" myclass1 myclass2 ".split(' ').join(".")
উত্পাদন করে
".myclass1..myclass2."
আমি মনে করি আপনি বর্গের নামের জন্য অনুমোদিত অক্ষরগুলির সেটটিতে নিয়মিত অভিব্যক্তিটি ব্যবহার করতে ভাল। উদাহরণ স্বরূপ:
" myclass1 myclass2 ".match(/[\d\w-_]+/g);
উত্পাদন করে
["myclass1", "myclass2"]
নিয়মিত প্রকাশটি সম্ভবত সম্পূর্ণ নয় তবে আশা করি আপনি আমার বক্তব্যটি বুঝতে পেরেছেন। এই পদ্ধতির দরিদ্র বিন্যাসের সম্ভাবনা প্রশমিত করে।
হাইটস্টক উত্তরটি (যা আমি খুঁজে পেয়েছি তার মধ্যে সেরা) আমি সম্পূর্ণ করতে পেরেছিলাম:
className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');
সুতরাং "myclass1 myclass2" এর জন্য ফলাফল '.myclass1 .myclass2' হবে
আপনি দুটি উপায়ে ক্লাসের নাম পেতে পারেন:
var className = $('.myclass').attr('class');
অথবা
var className = $('.myclass').prop('class');
<div id="elem" class="className"></div>
জাভাস্ক্রিপ্ট সহ
document.getElementById('elem').className;
JQuery সহ
$('#elem').attr('class');
অথবা
$('#elem').get(0).className;
আপনি যদি শ্রেণীর নামটি না জানেন তবে আপনি আইডিটি জানেন তবে আপনি এটি চেষ্টা করতে পারেন:
<div id="currentST" class="myclass"></div>
তারপরে এটিকে কল করুন:
alert($('#currentST').attr('class'));
আপনি যদি ডিভের ক্লাসগুলি পেতে চান এবং তারপর কোনও ক্লাসের উপস্থিত রয়েছে কিনা তা পরীক্ষা করতে চান তবে সাধারণ ব্যবহার।
if ( $('#div-id' ).hasClass( 'classname' ) ) {
// do something...
}
যেমন;
if ( $('body').hasClass( 'home' ) ) {
$('#menu-item-4').addClass('active');
}
চেষ্টা করে দেখুন
এইচটিএমএল
<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>
যদি আমাদের একক থাকে বা আমরা প্রথম div
উপাদানটি ব্যবহার করতে পারি
$('div')[0].className
অন্যথায় আমাদের id
সেই উপাদানটির একটি দরকার
আমাদের যদি একটি কোড থাকে:
<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
এবং আপনি এটি উদাহরণস্বরূপ গতিশীলভাবে একটি নির্দিষ্ট পুনর্লিখন সিএসএস নিয়ম তৈরি করতে পেতে পারেন।
শুভেচ্ছা সহ
এটিও কাজ করে।
const $el = $(".myclass");
const className = $el[0].className;
জাভাস্ক্রিপ্ট বা 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];
এর মতো ব্যবহার করুন: -
$(".myclass").css("color","red");
আপনি যদি এই ক্লাসটি একাধিকবার ব্যবহার করেন তবে প্রতিটি অপারেটর ব্যবহার করুন
$(".myclass").each(function (index, value) {
//do you code
}
parents()
।