jQuery hasClass () - একাধিক শ্রেণীর জন্য পরীক্ষা করুন


162

সঙ্গে:

if(element.hasClass("class"))

আমি একটি ক্লাসের জন্য পরীক্ষা করতে পারি, তবে "উপাদান" এর অনেকগুলি ক্লাস রয়েছে কি না তা যাচাই করার কোনও সহজ উপায়?

আমি ব্যাবহার করছি:

if(element.hasClass("class") || element.hasClass("class") ... )

যা খুব খারাপ নয়, তবে আমি এরকম কিছু নিয়ে ভাবছি:

if(element.hasClass("class", "class2")

দুর্ভাগ্যক্রমে যা কাজ করে না।

এরকম কিছু আছে কি?

উত্তর:


227

কেমন:

element.is('.class1, .class2')

9
না, কারণ এটি এমন উভয় শ্রেণীর উপাদানগুলির সন্ধান করবে। আমি মনে করি মার্সেল এক বা একাধিক ক্লাসের উপাদানগুলির সন্ধান করছে।
গাইলস ভ্যান গ্রুইসেন

এখনই লক্ষ্য করা গেছে যে আমার সেখানে 4 আইডি = "হ্যালো" উপাদান রয়েছে। করতে অনুক্রমে ফিক্সড সংস্করণ ভ্যালিডেটর খুশি: jsbin.com/uqoku/2/edit
Matchu

1
@ ম্যাচু আমার সাথে একই সমস্যা ছিল .hasClass()তবে আপনার সমাধানটি মনে হচ্ছে কৌশলটি সফল হয়েছে, ধন্যবাদ
নাসির

11
এটি আমার পক্ষে কাজ করে নি, তবে $('element').is('.class1.class2')করেছে
iamchriswick

6
@ আইমক্রিসউইক: ওপি যা চেয়েছিল তার চেয়ে কিছুটা আলাদা। .class1.class2উপাদান আছে ম্যাচ হবে উভয় ক্লাস, কিন্তু তারা অনেক উপাদান আছে যা মেলে খুঁজছেন সেটা পারেন বর্গ।
ম্যাচু

291
element.is('.class1, .class2')

কাজ করে, তবে এটি তুলনায় 35% ধীর

element.hasClass('class1') || element.hasClass('class2')

এখানে চিত্র বর্ণনা লিখুন

আমি যা বলি তা যদি সন্দেহ করেন তবে আপনি jsperf.com এ যাচাই করতে পারবেন ।

আশা করি এটি কারও সাহায্য করবে।


16
19% ধীর, বড় চুক্তি। প্রোগ্রামাররা বেশি ব্যয়বহুল।
এখনকার

21
@ দামিয়াননওক যদি এই প্রোগ্রামাররা লিখতে রাজি না হয় তবে তারা খুব ব্যয়বহুল নয় এমন আরও কোডের তুচ্ছ পরিমাণের পরিমাণের পরিমাণের পরিমাণ কী লিখতে চায়?
আক্কুমা

2
... ওম, তবে আমি ক্রোম 21.0.1180 এর জন্য এইটি কেবল jsperf এ চালিয়েছি এবং এটির () পদ্ধতিটি এখন প্রায় 20% দ্রুত। তবে hasClass () আরও পঠনযোগ্য বলে মনে হচ্ছে।
দানিয়াল আয়তেকিন

3
@psychobrm: যদি আপনাকে একবারে 10 টি ক্লাস পরীক্ষা করতে হয় তবে আপনার ক্লাসের নামগুলি প্রবাহিত করার জন্য আপনার যা দরকার তা হল। এ জাতীয় বাজে কোন কারণ নেই। :)
সিএইচও

5
পারফরম্যান্স অপ্টিমাইজ করার প্রয়োজনীয়তা ব্যক্তিগতভাবে ক্যান না। প্রতি সেকেন্ডে 12000 অপারেশন আমার কাছে যথেষ্ট দ্রুত বলে মনে হয়। আমি বলবো যেটি আপনার কাছে ভাল লাগবে ব্যবহার করুন। প্রয়োজন দেখা দিলে কর্মক্ষমতা অনুকূল করুন Op
3Dom

38
$.fn.extend({
    hasClasses: function (selectors) {
        var self = this;
        for (var i in selectors) {
            if ($(self).hasClass(selectors[i])) 
                return true;
        }
        return false;
    }
});

$('#element').hasClasses(['class1', 'class2', 'class3']);

এটি সহজ এবং সহজ এটি করা উচিত।


2
আপনি (আমি নির্বাচকদের মধ্যে) এর জন্য একটি ভ্যারাইস মিস করছেন, এভাবে একটি গ্লোবাল তৈরি করছে।
গ্রিমওয়ে

4
কিছুটা ছোটখাটো পয়েন্ট, তবে প্যারামিটার সিলেক্টরদের সত্যই ক্লাস বা ক্লাসের নাম দেওয়া উচিত , যেহেতু আপনি যা করছেন তা নির্বাচকরা নয়। নির্বাচকদের সামনে d ('# উপাদান') এর মতো বিন্দু থাকবে has
jbyrd

10

ফিল্টার () আরেকটি বিকল্প

যারা নির্বাচকের সাথে মেলে বা ফাংশনের পরীক্ষায় উত্তীর্ণ হয় তাদের সাথে ম্যাচ করা উপাদানগুলির সেট কমিয়ে দিন।

$(selector).filter('.class1, .class2'); //Filter elements: class1 OR class2

$(selector).filter('.class1.class2'); // Filter elements: class1 AND class2


4

এখানে একটি উত্তর যা সিনট্যাক্স অনুসরণ করে

$(element).hasAnyOfClasses("class1","class2","class3")
(function($){
    $.fn.hasAnyOfClasses = function(){
        for(var i= 0, il=arguments.length; i<il; i++){
            if($self.hasClass(arguments[i])) return true;
        }
        return false;
    }
})(jQuery);

এটি দ্রুততম নয়, তবে এটির দ্ব্যর্থহীন এবং সমাধানটি আমি পছন্দ করি। বেঞ্চ: http://jsperf.com/hasclasstest/10


Error: $self is not defined
ব্যাগোফিল্ক

1
@ বাগোফিলক আমার উত্তরটি অন্যদের দ্বারা সম্পাদনা করা হয়েছে যেহেতু আমি এটি 6 বছর আগে লিখেছিলাম। যেহেতু আমি বছরগুলিতে jQuery ব্যবহার করি নি, সম্পাদনাটি কী হয়েছিল তা আমি ঠিক জানি না তবে মূলত আমার var $self = $(this);
লুপটির

1

এই সম্পর্কে কি,

$.fn.extend({
     hasClasses: function( selector ) {
        var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
            rclass = /[\n\t\r]/g,
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
                return true;
            }
        }
        return false;
    }
});

ব্যবহার করা সহজ,

if ( $("selector").hasClasses("class1, class2, class3") ) {
  //Yes It does
}

এবং এটি আরও দ্রুত বলে মনে হচ্ছে, http://jsperf.com/hasclasstest/7


1

কি সম্পর্কে:

if($('.class.class2.class3').length > 0){
    //...
}

3
আপনি প্রয়োজন হবে না > 0। দৈর্ঘ্য যদি শূন্য নয় তবে এটি সত্য হবে।
আইজাক লুব


0

ডিফল্ট জেএস ম্যাচ () ফাংশনটি ব্যবহার করুন:

if( element.attr('class') !== undefined && element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  console.log("match");
}

regexp এ ভেরিয়েবল ব্যবহার করতে, এটি ব্যবহার করুন:

var reg = new RegExp(variable, 'g');
$(this).match(reg);

যাইহোক, এটি দ্রুততম পন্থা: http://jsppha.com/hasclass-vs-is-stackoverflow/22


এই উত্তরটি সবচেয়ে ভাল পছন্দ করুন, যদিও আমি সন্দেহ করি যে ক্লাসগুলির মধ্য দিয়ে লুপিং করা এবং স্ট্রিং সূচক ব্যবহার করা পরীক্ষা আরও দ্রুততর হতে পারে ...


0

আপনি এইভাবে করতে পারেন:

if($(selector).filter('.class1, .class2').length){
    // Or logic
}

if($(selector).filter('.class1, .class2').length){
    // And logic
}

-1

এটি আমার পক্ষে কাজ করেছে:

$('.class1[class~="class2"]').append('something');

3
এই প্রশ্নের জিজ্ঞাসা করা প্রশ্নের সাথে কোনও সম্পর্ক নেই।
জেজেন টমাস

এটি আসলে একটি দুর্দান্ত উত্তর। উপরের নির্বাচক সিনট্যাক্সটি ক্লাস 1 এবং ক্লাস 2 উভয়ই সমস্ত উপাদানকে ধরে ফেলে। তারপরে আপনি যা পছন্দ করেন তা করতে পারেন, এই ক্ষেত্রে সংযোজন করুন। অন্যান্য পদ্ধতির তুলনায় পারফরম্যান্স চেক করা হয়নি তবে বাক্য গঠনটি সুন্দর এবং সংযোগযুক্ত।
টিম রাইট

2
@ টিম রাইট এটি একটি ভয়ঙ্কর উত্তর। 2 শ্রেণীর সাথে একটি উপাদান নির্বাচন করার স্বাভাবিক $('.class1.class2')উপায়টি দ্বিতীয় শ্রেণির জন্য কোনও অ্যাট্রিবিউট সিলেক্টর ব্যবহার করার দরকার নেই। এছাড়াও, প্রশ্নটি জিজ্ঞাসা করছে যে সমস্ত শ্রেণি নয়, যে কোনও একটির মাধ্যমে কোনও উপাদান কীভাবে নির্বাচন করবেন।
সমস্ত কর্মীরা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.