ক্লাস যোগ করার আগে ইতিমধ্যে নির্ধারিত হয়েছে কিনা তা পরীক্ষা করুন

Question

JQuery- এ, ক্লাসটি already শ্রেণিটি যুক্ত করার আগে কোনও উপাদানকে ইতিমধ্যে নির্ধারিত করা হয়েছে কিনা তা পরীক্ষা করার পরামর্শ দেওয়া হয়? এমনকি এটি কি আদৌ কোনও প্রভাব ফেলবে?

উদাহরণ স্বরূপ:

<label class='foo'>bar</label>

যদি সন্দেহ হয় যে ক্লাসটি bazইতিমধ্যে নির্ধারিত করা হয়েছে label, তবে এটিই কি সেরা পন্থা:

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

অথবা এটি যথেষ্ট হবে:

$('label').addClass('baz');

Comments

আমি .hasClassতখনই ব্যবহার করেছি যখন আমার ক্লাসের উপস্থিতি আছে কিনা তা খতিয়ে দেখা দরকার, যদি আমাকে কেবল ক্লাস বরাদ্দ করতে হয় - আমি ব্যবহার করি .addClass। jQuery ক্লাসগুলি নকল করে না

— সামিচ

কেবল পরীক্ষা না করে ক্লাস যুক্ত করুন। এটি ইতিমধ্যে বিদ্যমান থাকলে, এটি আর যুক্ত করা হবে না।

— ব্লেজমোনজার

Answer 1

শুধু কল addClass()। jQuery আপনার জন্য চেক করবে। আপনি আপনার নিজের উপর পরীক্ষা করেন তাহলে আপনি কাজ দ্বিগুন যেহেতু jQuery এর হবে এখনও তোমার জন্য চেক চালানো।

Answer 2

কনসোলে একটি সাধারণ চেক আপনাকে জানিয়েছিল যে addClassএকই ক্লাসের সাথে একাধিকবার কল করা নিরাপদ।

বিশেষ করে আপনি চেক জানতে পারেন উৎস

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

Comments

দয়া করে আমার প্রশ্নটি পুনরায় পড়ুন এবং আপনি লক্ষ্য করবেন যে এটি নিরাপদে

— মৌমাছির

আপনার সম্পাদিত উত্তর থেকে আমি দেখতে পাচ্ছি যে jQuery আসলে এটি পরীক্ষা করার আগে অ্যালড্রি ক্লাসটি নির্ধারিত হয়েছে কিনা তা পরীক্ষা করে দেখুন, অর্থাত্

— নিজেরাই

@ মুলসকিনার এই কথাটিই আমি বোঝাচ্ছিলাম।

— রায়নস

@ রায়নোস: কনসোলে একটি সাধারণ চেক আপনাকে জানিয়েছিল যে একই ক্লাসের সাথে একাধিকবার অ্যাডক্লাস কল করা নিরাপদ। তবুও, আমি যখন উত্তরের জন্য গুগল করলাম তখন এই প্রশ্নটি শীর্ষ হিটগুলির মধ্যে একটি ছিল ... অন্যদিকে কোথাও নথিভুক্ত এমন তুচ্ছ জিনিসও স্ট্যাক ওভারফ্লোতে স্থান পেয়েছে।

— eirirlar

এই উত্তরে অনেক বেশি মনোভাব রয়েছে। কিছু কৌশলে এর উত্তর দিতে পারত।

— dreadwail

Answer 3

এই প্রশ্নের অন্যটির অনুসরণে আমার দৃষ্টি আকর্ষণ হয়েছে যা এর একটি সদৃশ হিসাবে চিহ্নিত হয়েছিল ।

এই উত্তরটি সামান্য যুক্ত বিশদ সহ গ্রহণযোগ্য উত্তরকে সংক্ষিপ্তসার করে।

আপনি অপ্রয়োজনীয় চেক এড়িয়ে অপ্টিমাইজ করার চেষ্টা করছেন, এই ক্ষেত্রে এখানে এমন কারণ রয়েছে যা সম্পর্কে আপনাকে সচেতন হতে হবে:

1. জাভাস্ক্রিপ্টের মাধ্যমে কোনও ডিওএম উপাদান হেরফের করে শ্রেণীর বৈশিষ্ট্যে নকল শ্রেণীর নাম থাকা সম্ভব নয় have আপনার যদি class="collapse"এইচটিএমএল থাকে, কলিং Element.classList.add("collapse");অতিরিক্ত ধসের ক্লাস যোগ করবে না । আমি অন্তর্নিহিত বাস্তবায়ন জানি না, তবে আমি মনে করি এটি যথেষ্ট ভাল হওয়া উচিত।
2. JQuery এর addClassএবং removeClassবাস্তবায়নগুলিতে কিছু প্রয়োজনীয় চেক তৈরি করে (আমি উত্স কোডটি যাচাই করেছি )। কারণ addClass, কিছু চেক করার পরে এবং যদি কোনও শ্রেণি বিদ্যমান থাকে তবে জিকুয়ারি আবার এটিকে যুক্ত করার চেষ্টা করবেন না। একইভাবে removeClass, জিকুয়ারি একটি লাইনের সাথে সামথিংস করে cur.replace( " " + clazz + " ", " " );যার কোন শ্রেণি যদি উপস্থিত থাকে তবেই তা মুছে ফেলবে।

লক্ষ্যণীয়, জেকুয়ারি removeClassএকটি অর্থহীন পুনরায় রেন্ডারিং এড়ানোর জন্য এর বাস্তবায়নে কিছু অপ্টিমাইজেশন করে। এটা এইভাবেই চলে

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

সুতরাং আপনি যে সর্বোত্তম মাইক্রো অপ্টিমাইজেশন করতে পারেন তা হ'ল ফাংশন কল ওভারহেড এবং সম্পর্কিত বাস্তবায়ন পরীক্ষাগুলি এড়ানো aim

বলুন যে আপনি নামের একটি শ্রেণি টগল করতে চান collapse, আপনি যদি ক্লাসটি যুক্ত করা বা সরিয়ে দেওয়ার বিষয়টি পুরোপুরি নিয়ন্ত্রণে রাখেন এবং collapseক্লাসটি প্রাথমিকভাবে অনুপস্থিত থাকে, তবে আপনি নিম্নলিখিত হিসাবে অনুকূলিত হতে পারেন:

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

অন্যদিকে, যদি আপনি স্ক্রোল অবস্থানের পরিবর্তনের কারণে কোনও শ্রেণিতে টগল করছেন তবে আপনাকে স্ক্রোল ইভেন্ট হ্যান্ডলিংটি থ্রোটল করার জন্য সুপারিশ করা হচ্ছে ।

Answer 4

$("label")
  .not(".foo")
  .addClass("foo");