একটি নির্দিষ্ট স্ট্রিং দিয়ে শুরু হওয়া সমস্ত ক্লাস সরান


99

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

$("#a").removeClass("bg*");

উত্তর:


59

JQuery এর সাথে, আসল DOM উপাদানটি সূচকের শূন্যে রয়েছে, এটি কাজ করা উচিত

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

34
এই এক সঙ্গে যত্নশীল। শব্দ সীমানা ড্যাশ অক্ষর ('-') এবং বিন্দু এবং অন্যান্যগুলিতে বিভক্ত হয়, সুতরাং "বিজি.এ", "বিজি-এ" ইত্যাদি শ্রেণীর নামগুলি সরানো হবে না তবে ".এ", "-এ" ইত্যাদি দিয়ে প্রতিস্থাপন করা হবে সুতরাং, যদি আপনার বিরামচিহ্নগুলির অক্ষরগুলির সহ ক্লাসের নাম থাকে তবে আপনি কেবল একটি সরল রেজেক্স প্রতিস্থাপন চালিয়ে সমস্যায় পড়তে পারেন। শব্দের সীমানা সংজ্ঞা সম্পর্কে
জাকুব পি

6
কবিতা সরিনের নীচে বিভক্ত ('') এবং সূচিপত্রের উত্তর আরও ভাল আইএমও, কারণ এটি সেই বিশেষ বৈশিষ্ট্যযুক্ত "জম্বি" ক্লাসগুলিকে পপ আপ করতে পারে না।
জাকুব পি।

4
এই পদ্ধতি এখনও একটি ভাল Regex সাথে ব্যবহার করা যাবে, এক হিসাবে যেমন এখানে পাওয়া stackoverflow.com/a/2644364/1333402
ssmith

109

শব্দের সীমানায় বিভক্ত একটি রেজেক্স এটির \bজন্য সেরা সমাধান নয়:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

বা jQuery মিশ্রণ হিসাবে:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

2018 ES6 আপডেট:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

9
এটি \ বি (শব্দের সীমানা যাচাই) সহ রেজিএক্সপ্যাক্সের চেয়ে আরও ভাল পন্থা কারণ এটি 'জম্বি ক্লাসগুলি' পপিংয়ে আটকায়। আপনার যদি "উপসর্গ-প্রত্যয়" এর মতো ক্লাস থাকে তবে এই থ্রেডের 'সেরা উত্তর' ক্লাসটি '-সুফিক্স' ছাড়বে কারণ \ বি '-' চরের আগে বিভক্ত হবে। আপনার বিভক্ত-মানচিত্র-যোগদানের সমাধানটি এর চারপাশে কাজ করে :) আমি আপনার সমাধানের চারপাশে একটি ছোট্ট jQuery প্লাগইন তৈরি করেছি, কবির: ( gist.github.com/2881585 )
জাকুব পি।

4
+1 আমি পাশাপাশি সম্মতি জানাই, অন্য প্রতিটি উত্তর কেবল একটি সরল রেজেক্স হিসাবে উপস্থিত হয় যা অ-স্থানের শব্দের সীমানায় ভেঙে যায়। আগামীকাল আমার কাছে সময় থাকলে আমি একটি ইউনিট পরীক্ষা সরবরাহ করব যা এটি প্রমাণ করে।
gerges

4
আমি এটি পছন্দ করি যদিও এটি আসলে বৈধ কোড নয়, কারণ বেনামে ফাংশনটি filterঅবশ্যই একটি বুলিয়ান ফিরিয়ে দিতে হবে। এটি কাজ করবে:var classes = $(e).attr("class").split(" "); $(classes).each(function(i, item) { classes[i] = item.indexOf("prefix") === -1 ? item : "prefix-new"); }); $(e).attr("class", classes.join(" "));
টিম

আরও বৈধ সমাধান মানচিত্র ব্যবহার করে:$e.attr('class', $.map($e.attr('class').split(' '), function (klass) { return klass.indexOf(prefix) != 0 ? klass : undefined; }).join(' '));
এম মিলার

4
এই পদ্ধতির সেরা কাজ করে। আমি @ জাকুবপির প্লাগইন ব্যবহার করেছি। আমি যদি করতে পারি তবে একটি পরামর্শ: এটি কী করে, যখন এটি এখন ক্লাসগুলি ফেরত দেয়, এটি প্রচুর স্থান তৈরি করে। উদাহরণস্বরূপ আপনি চালানো হলে class="blackRow blackText orangeFace blackHead"ফিরে আসবে । আমি তাই মত ফলাফলের ছাঁটাই করে এই মীমাংসিত: । class=" orangeFace "removeClassPrefix("black");el.className = $.trim(classes.join(" "));
অ্যালবার্ট

29

আমি একটি সাধারণ jQuery প্লাগইন লিখেছি - alterClass , যা ওয়াইল্ডকার্ড শ্রেণি অপসারণ করে। Optionচ্ছিকভাবে ক্লাসও যুক্ত করবে।

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 

ধন্যবাদ পিট! স্রেফ আপনার প্লাগইন ব্যবহার করেছে এবং এটি দুর্দান্ত কাজ করে ... আমাকে কিছু সময় বাঁচিয়েছে!
জর্দান.বাউকে

11

এটি পরিচালনা করতে আপনার কোনও jQuery নির্দিষ্ট কোডের দরকার নেই। এগুলি প্রতিস্থাপনের জন্য কেবল একটি রেজিপ্যাক্স ব্যবহার করুন:

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

যে কোনও উপসর্গ সমর্থন করতে আপনি এটি সংশোধন করতে পারেন তবে রেজিএক্সপ্যাক কেবল একবারই সংকলিত হবে বলে দ্রুততর পদ্ধতিটি উপরে রয়েছে:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

9

ব্যবহার 2nd স্বাক্ষর এর $.fn.removeClass:

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

যেহেতু jQuery v1.4, এটি সেরা পন্থা।
দিনাই

3

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html বলেছেন:

... এবং .removeClass () সমস্ত ক্লাস সরিয়ে দেবে ...

এটা আমার জন্য কাজ করে ;)

চিয়ার্স


এটি একটি ভাল পছন্দ! কাজ।
আফশিন মেহরাবানি

12
একটি নির্দিষ্ট স্ট্রিং দিয়ে শুরু করে সমস্ত ক্লাস কীভাবে সরিয়ে ফেলা হবে তা জিজ্ঞাসা করে না যে সমস্ত ক্লাস কীভাবে সরিয়ে নেওয়া যায়। এই দুটি জিনিস খুব, খুব আলাদা।
ক্রিস হ্যারিসন

3

আমি সহজ jQuery কনস্ট্রাক্টস এবং অ্যারে হ্যান্ডলিং ফাংশনগুলি ব্যবহার করে এমন একটি পদ্ধতিকে হ'ল এমন একটি ফাংশন ঘোষণা করি যা ক্লাসের নিয়ন্ত্রণ এবং উপসর্গের আইডি নেয় এবং সমস্ত শ্রেণিবদ্ধ মুছে ফেলে। কোডটি সংযুক্ত রয়েছে:

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

এখন এই ফাংশনটি যে কোনও জায়গা থেকে, বোতামের অন্লিক বা কোড থেকে কল করা যেতে পারে:

removeclasses("a","bg");

3

আধুনিক ব্রাউজারগুলির জন্য:

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

2

আমি ঠিক একই সমস্যার সমাধান খুঁজছিলাম। "Fontid_" উপসর্গ দিয়ে শুরু করে সমস্ত ক্লাস অপসারণ করতে আমি এই নিবন্ধটি পড়ার পরে একটি ছোট প্লাগইন লিখেছিলাম যা আমি এখন ব্যবহার করছি।

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

ব্যবহার:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

এই চেক "সঙ্গে স্ট্রিং শুরু" 10x আরো লাইন এবং একটি কম দক্ষ সঙ্গে আমার সমাধান ছাড়া আর কিছুই নয়: - /
sarink

1

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি নতুন সমাধান খুঁজে পেয়েছি এবং এর অসুবিধা আছে কিনা তা জানতে চাই?

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

2020 সালে, অসুবিধাটি jQuery।
কনেক্সো

1

এক লাইনে ... এমন নিয়মিত এক্সপ্রেশনের সাথে মেলে এমন সমস্ত ক্লাস সরিয়ে দেয়

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

0

প্রেস্টাউলের ​​উত্তরটি সহায়ক ছিল, কিন্তু এটি আমার পক্ষে বেশ কার্যকর হয়নি। আইডি দ্বারা কোনও বস্তু নির্বাচন করার jQuery উপায় কার্যকর হয়নি। আমাকে ব্যবহার করতে হয়েছিল

document.getElementById("a").className

পরিবর্তে

$("#a").className

বা "(" # a ") [0]। ক্লাসের নাম হিসাবে ক্লাসের নামটি কেবলমাত্র ডিওএম এলিমেন্টে উপলব্ধ এবং না জিকুয়েরি অবজেক্ট
সরফরাজ

এটি কোনও জবাবের জন্য একটি মন্তব্য, কোনও উত্তর নয়
টিজে

0

আমি শ্রেণীর নামের জন্য হাইফেন'- এবং অঙ্কগুলিও ব্যবহার করি। সুতরাং আমার সংস্করণটিতে '\ d-' অন্তর্ভুক্ত রয়েছে

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

0
(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

-6
$("#element").removeAttr("class").addClass("yourClass");

4
আমি মনে করি না আপনি প্রশ্নটি খুব ভাল করে পড়েছেন। ব্যবহারকারী কেবল একটি ক্লাস অপসারণ এবং অন্য একটি যুক্ত করার বিষয়ে জিজ্ঞাসা করছিলেন না।
অ্যান্ড্রু বারবার

4
@Andrew নাপিত: আপনি করছেন ঠিক এই না সঠিক উত্তর আছে, কিন্তু majorsk8, শুধু একটি একক এক সব শ্রেণীর (removeAttr) পরিষ্কার কিভাবে প্রস্তাব;)
কাত
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.