jQuery অপসারণ ক্লাস ওয়াইল্ডকার্ড

Question

সমস্ত ক্লাস মিলে মুছে ফেলার কোনও সহজ উপায় আছে, উদাহরণস্বরূপ,

color-*

সুতরাং আমার যদি একটি উপাদান থাকে:

<div id="hello" class="color-red color-brown foo bar"></div>

অপসারণের পরে, এটি হবে

<div id="hello" class="foo bar"></div>

ধন্যবাদ!

Comments

"গৃহীত উত্তর" এর মতো একটি রেজেক্স অ ফাঁক শব্দের সীমানায় ভেঙ্গে যাবে। আমি নীচে একটি বিকল্প সমাধান পোস্ট করেছি। এছাড়াও দেখুন: stackoverflow.com/questions/57812/...

— sarink

@ কবিরসারিন গৃহীত উত্তরটি ঠিক করার পরে এটি আপডেট করা হয়েছে।

— এমিল বার্গারন

সিএসএস ওয়াইল্ডকার্ডস surfingsuccess.com/css/…

— ম্যাক্স

Answer 1

RemoveClass ফাংশন থেকে একটি ফাংশন আর্গুমেন্ট গ্রহণ করা jQuery এর 1.4 ।

$("#hello").removeClass (function (index, className) {
    return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});

সরাসরি উদাহরণ: http://jsfiddle.net/xa9xS/1409/

Comments

আমি ভেবেছিলাম এটি লক্ষ্য করার মতো ছিল যে এটি শুরুর দিকে শুরু না হওয়া মিলে যাওয়া ক্লাসগুলির একটি শীর্ষস্থানীয় শ্বেত স্থানকে ক্যাপচার করবে। জাভাস্ক্রিপ্ট ইতিবাচক চেহারাটির পিছনে সমর্থন করে না যাতে আপনার ব্যবহারের জন্য ক্যাপচার গ্রুপের কাজ করতে হয়। তবে এটি একটি মোটা, কারণ অপসারণের ক্লাস ফাংশনটি আপনার ক্লাসের স্ট্রিং থেকে শুকনো জায়গাটি আপনার জন্য দিয়ে classes = ( value || "" ).match( rnotwhite ) || [];

— ফেলবে

আমি এই সমাধানটি সেরা পছন্দ করি! আমি কীভাবে দুই বা ততোধিক ক্লাস অপসারণের জন্য পরীক্ষা করতে পারি? অর্থাৎ sport-, nav-এবং color-?

— lowtechsun

ক্লাস এন্ডিংয়ের মতো মেলে আপনি কী করবেন *-color?

— সার্কেল বি

@ লোতেটসান আপনি আপনার রেজেেক্সে এভাবে যুক্ত করতে পারেন (color-|sport-|nav-)। এটি মিলবে color-, বা sport-, বা nav-। সুতরাং, উপরের উত্তর হয়ে যাবে /(^|\s)(color-|sport-|nav-)\S+/g।

— বগি

গৃহীত উত্তরটি সঠিক, তবে মুশকিলভাবে আমি \ b ব্যবহার করব যা কোনও শব্দ বাউন্ডারের সাথে মেলে না বরং আরও শব্দযুক্ত (^ | \ গুলি)। সুতরাং, উদাহরণস্বরূপ, যাদু শব্দের সাথে অন্তর্ভুক্ত সমস্ত শ্রেণীর অপসারণের জন্য একটি অ-নেতিবাচক পূর্ণসংখ্যার এবং কেবল সেইগুলিই, আমি / \ bmagic \ d + \ b / এর সাথে মিল করব।

— কার্লএডম্যান

Answer 2

$('div').attr('class', function(i, c){
    return c.replace(/(^|\s)color-\S+/g, '');
});

Comments

আমি এটি পছন্দ করি কারণ এটি ওভারহেড হ্রাস করে এবং সরাসরি পয়েন্টে যায়। অ্যাটর যখন কাজটি আরও ভাল করে তখন ক্লাস রিমুভ কেন?

— ক্রুদ্ধ ড্যান

আমার মনে হয় আপনার খালি ক্লাস ( c is undefined) থেকে রক্ষা করা দরকার ? কমপক্ষে যখন আমি এই পৃষ্ঠায় আমার প্লাগিনে এটি নীচে চেষ্টা করেছি তখন $('a').stripClass('post', 1)নিক্ষেপ করলেন "

— প্রকারের ত্রুটি

@ কোবি হ্যাঁ, আমি মনে করি না যে কোনও গুণকে ফিল্টার করা এবং এটির ফল নেই যা প্রত্যাশা করে - এটির $('div[class]')সাথে কেবল তার উপাদানগুলির ফিরিয়ে দেওয়া উচিত class, তাদের মান আছে কি না। পরীক্ষার পরিস্থিতি: jsfiddle.net/drzaus/m83mv

— ড্রাজাস

@ কোবি - আমি মনে করি আপনি যা পাচ্ছেন তা আমি দেখেছি; প্রান্তের ক্ষেত্রে .removeProp('class')বা .className=undefinedফিল্টার [class]এখনও কিছু ফিরিয়ে দেয়, তারা ঠিক undefined। প্রযুক্তিগতভাবে এখনও এটির একটি শ্রেণি রয়েছে ( .removeAttr('class')যার বিপরীতে এটি আপনার ফাংশনটি ভেঙে দেয় তবে আমার রূপটি নয়

— j

একটি দ্রুত পরীক্ষা যুক্ত করা আমার জন্য কাজ করে:return c && c.replace(/\bcolor-\S+/g, '');

— স্মৃতি

Answer 3

আমি একটি প্লাগইন লিখেছি যা এটিকে অলটারক্লাস বলে - ওয়াইল্ডকার্ডের সাথে ম্যাচিংয়ের সাথে উপাদান ক্লাসগুলি সরান। Ptionচ্ছিকভাবে ক্লাস যুক্ত করুন: https://gist.github.com/1517285

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

Comments

সত্যিই খুব সুন্দর ... আমাকে এমন কিছু কোড পুনরায় ব্যবহার করতে সহায়তা করেছে যেখানে আমার কেবল Twitter Boostrapএই জাতীয় ক্লাসগুলি সরিয়ে ফেলতে হবে :$(".search div").children('div').alterClass('span* row-fluid');

— লেনিয়েল ম্যাকাফেরি

Answer 4

আমি এটিকে জেকুরি প্লাগইনে সাধারণীকরণ করেছি যা একটি আর্গুমেন্ট হিসাবে একটি রেগেক্স নেয়।

কফি:

$.fn.removeClassRegex = (regex) ->
  $(@).removeClass (index, classes) ->
    classes.split(/\s+/).filter (c) ->
      regex.test c
    .join ' '

javascript:

$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(/\s+/).filter(function(c) {
      return regex.test(c);
    }).join(' ');
  });
};

সুতরাং, এই ক্ষেত্রে, ব্যবহার (উভয় কফি এবং জাভাস্ক্রিপ্ট) হবে:

$('#hello').removeClassRegex(/^color-/)

নোট করুন যে আমি Array.filterফাংশনটি ব্যবহার করছি যা আইই <9 তে বিদ্যমান নেই। আপনি পরিবর্তে ইন্ডোরস্কোরের ফিল্টার ফাংশন বা গুগল এই ডাব্লুটিএফপিএল এর মতো একটি পলিফিলের জন্য ব্যবহার করতে পারেন ।

Answer 5

আপনি যদি এটি অন্য জায়গায় ব্যবহার করতে চান তবে আমি আপনাকে একটি বর্ধনের পরামর্শ দিচ্ছি। এই আমার জন্য ভাল কাজ করছে।

 $.fn.removeClassStartingWith = function (filter) {
    $(this).removeClass(function (index, className) {
        return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ')
    });
    return this;
};

ব্যবহার:

$(".myClass").removeClassStartingWith('color');

Answer 6

আমরা সমস্ত ক্লাস পেতে পারি .attr("class"), এবং অ্যারে, এবং লুপ এবং ফিল্টার:

var classArr = $("#sample").attr("class").split(" ")
$("#sample").attr("class", "")
for(var i = 0; i < classArr.length; i ++) {
    // some condition/filter
    if(classArr[i].substr(0, 5) != "color") {
        $("#sample").addClass(classArr[i]);
    }
}

ডেমো: http://jsfiddle.net/L2A27/1/

Comments

যোগ করা হয়েছে var prefix='color';এবং পরিবর্তিত হয়েছে ...if (classArr[i].substr(0, prefix.length) != prefix)

— ধনী সি

Answer 7

@ Tremby এর অনুরূপ উত্তর , এখানে @ কবি কারো নির্দেশ চলে না উত্তর একটি প্লাগইন যে হয় উপসর্গ বা প্রত্যয় মেলে হবে।

• প্রাক্তন) রেখাচিত্রমালা btn-miniএবং যখন btn-dangerনা ।btnstripClass("btn-")
• প্রাক্তন) রেখাচিত্রমালা horsebtnএবং cowbtnকিন্তু না btn-miniবা btnকখনstripClass('btn', 1)

কোড:

$.fn.stripClass = function (partialMatch, endOrBegin) {
    /// <summary>
    /// The way removeClass should have been implemented -- accepts a partialMatch (like "btn-") to search on and remove
    /// </summary>
    /// <param name="partialMatch">the class partial to match against, like "btn-" to match "btn-danger btn-active" but not "btn"</param>
    /// <param name="endOrBegin">omit for beginning match; provide a 'truthy' value to only find classes ending with match</param>
    /// <returns type=""></returns>
    var x = new RegExp((!endOrBegin ? "\\b" : "\\S+") + partialMatch + "\\S*", 'g');

    // https://stackoverflow.com/a/2644364/1037948
    this.attr('class', function (i, c) {
        if (!c) return; // protect against no class
        return c.replace(x, '');
    });
    return this;
};

https://gist.github.com/zaus/6734731

Comments

রেকর্ডের জন্য, আমি এটিকে সহজ বলে মেনে নিচ্ছি না।

— কাঁপানো

@ ট্রাম্বি দুঃখিত, আমি সাধারণ ব্যবহারের অর্থ (অর্থাত্ উপসর্গ এবং প্রত্যয়) সহজ করেছিলাম , যেহেতু আপনাকে প্রতিবার একটি

— রেজেেক্স

আমি এখনও একমত না। আপনার পদ্ধতির সাহায্যে আপনাকে ডকুমেন্টেশনটি পড়তে হবে এবং মনে করতে হবে ঠিক কী পরিমাণ হওয়া endOrBeginদরকার। এটি স্ব-ব্যাখ্যামূলক নয়। একটি রেজেক্স লিখতে কি কঠিন? /^match-at-start/এবং /match-at-end$/প্রতিটি জেএস বিকাশকারীদের কাছে পরিচিত। কিন্তু তার নিজের প্রতিটি।

— কাঁপানো

অন্য চেয়ে ভিক্ষা regexes নির্যাতিত করা @tremby, একটি অ-Regex বিকল্প আরো ঘনিষ্ঠভাবে বিদ্যমান স্বাক্ষর সাথে মিলে যায় addClass, removeClassএবং toggleClass, সেখানে আবার প্রতি jQuery এর ডেভেলপার পরিচিত হয়। ডকুমেন্টেশন পড়া সম্পর্কে কি কঠিন? ;)

— ড্রাজস

ডকুমেন্টেশন পড়ার পক্ষে কোন অসুবিধা নেই, তবে @ ট্রাম্বি যেমন বলেছেন, তার সমাধানটি স্ব-বর্ণনামূলক, যখন আপনার ডকুমেন্টেশন প্রয়োজন। স্ব-ব্যাখ্যামূলক সমাধানগুলি সংজ্ঞা অনুসারে ব্যবহার করা সহজ।

— ফ্রান্সিসকো হজ

Answer 8

একটি jQuery প্লাগইন জন্য এটি চেষ্টা করুন

$.fn.removeClassLike = function(name) {
    return this.removeClass(function(index, css) {
        return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
    });
};

অথবা এটা

$.fn.removeClassLike = function(name) {
    var classes = this.attr('class');
    if (classes) {
        classes = classes.replace(new RegExp('\\b' + name + '\\S*\\s?', 'g'), '').trim();
        classes ? this.attr('class', classes) : this.removeAttr('class');
    }
    return this;
};

Answer 9

এআরএস 8১ এর উত্তরের উপর ভিত্তি করে (এটি কেবল শ্রেণীর নামগুলির সাথে শুরু হয় যা এর সাথে শুরু হয়), এখানে আরও নমনীয় সংস্করণ দেওয়া হয়েছে। আরো একটিhasClass() রেজেক্স সংস্করণ।

ব্যবহার: $('.selector').removeClassRegex('\\S*-foo[0-9]+')

$.fn.removeClassRegex = function(name) {
  return this.removeClass(function(index, css) {
    return (css.match(new RegExp('\\b(' + name + ')\\b', 'g')) || []).join(' ');
  });
};

$.fn.hasClassRegex = function(name) {
  return this.attr('class').match(new RegExp('\\b(' + name + ')\\b', 'g')) !== null;
};

Answer 10

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

$.fn.removeClassPrefix = function(prefix){
    var c, regex = new RegExp("(^|\\s)" + prefix + "\\S+", 'g');
    return this.each(function(){
        c = this.getAttribute('class');
        this.setAttribute('class', c.replace(regex, ''));
    });
};

Comments

RegExpপ্রতিটি কলব্যাকের বাইরে, একবারে কী বস্তুটি তৈরি করা আরও দক্ষ হবে না ?

— এমিল বার্গারন

@ এমিলিবার্গারন - হ্যাঁ এটা হবে! আমি পরিবর্তনগুলি করব

— vsync

Answer 11

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

// Wildcard removeClass on 'color-*'
$('[class^="color-"]').removeClass (function (index, classes) {
  var
    classesArray = classes.split(' '),
    removeClass = _.filter(classesArray, function(className){ return className.indexOf('color-') === 0; }).toString();

  return removeClass;
});

Comments

আন্ডারস্কোর _. ফিল্টার

— বার্ট

Answer 12

আপনি ভ্যালিলা জাভাস্ক্রিপ্ট এর সাথে এলিমেন্ট . classList ব্যবহার করে এটিও করতে পারেন । নিয়মিত প্রকাশটি ব্যবহার করার দরকার নেই:

function removeColorClasses(element) { for (let className of Array.from(element.classList)) if (className.startsWith("color-")) element.classList.remove(className); }

দ্রষ্টব্য: লক্ষ্য করুন যে আমরা শুরু Arrayকরার classListআগে একটি অনুলিপি তৈরি করেছি , এটি গুরুত্বপূর্ণ যেহেতু classListএকটি লাইভ DomTokenListযা ক্লাসগুলি সরানোর সাথে সাথে আপডেট হবে।

Answer 13

আপনি classNameউপাদানটির ডিওএম অবজেক্টের সম্পত্তিও ব্যবহার করতে পারেন :

var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));

Answer 14

একটি জেনেরিক ফাংশন যা এর সাথে শুরু হওয়া কোনও ক্লাস সরিয়ে দেয় begin:

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

http://jsfiddle.net/xa9xS/2900/

var begin = 'color-';

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

removeClassStartingWith($('#hello'), 'color-');

console.log($("#hello")[0].className);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello" class="color-red color-brown foo bar"></div>

Answer 15

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

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

বা একটি 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 = classes.join(" ");
    });
    return this;
};

Answer 16

যদি আপনার একাধিক উপাদানের ক্লাসের নাম 'উদাহরণ' রয়েছে, তাদের মধ্যে 'রঙ-' এর সমস্ত ক্লাস অপসারণ করতে পারেন তবে আপনি এটি করতে পারেন: [জকিউরি ব্যবহার করে]

var objs = $('html').find('.example');
for(index=0 ; index < obj1s.length ; index++){
    objs[index].className = objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}

আপনি যদি আপনার রেজেেক্সে [a-z1-9 -] * না রাখেন তবে এটি ক্লাসগুলি মুছে ফেলবে না যার নাম বা কিছু '-' রয়েছে তাদের নামে।

Answer 17

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

আমার পরিস্থিতিতে, আমি ক্লিক ইভেন্টে বডি ট্যাগে একটি রঙের ক্লাস যুক্ত করতে এবং সেট করা শেষ রঙটি সরিয়ে ফেলা প্রয়োজন। সেক্ষেত্রে আপনি বর্তমান রঙটি সংরক্ষণ করুন এবং তারপরে শেষ সেট রঙটি সরাতে ডেটা ট্যাগটি সন্ধান করুন।

কোড:

var colorID = 'Whatever your new color is';

var bodyTag = $('body');
var prevColor = bodyTag.data('currentColor'); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID); // set the new color as current

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

Comments

এটি এখানে অপ্রাসঙ্গিক। আপনি নিজের প্রশ্নের উত্তর দিতে পারতেন কারণ এটি এসও তে উত্সাহিত আচরণ।

— এমিল বার্গারন

@ এমিল: এটি সত্য। আমি এটি করতে পারি কারণ এটি সরাসরি আসল প্রশ্নের উত্তর দেয় না। আমি কি এই উত্তরটি ছেড়ে দেব বা এটি সরাতে হবে?

— redfox05

এই মুহুর্তে, এটি আপনার নিজের ঝুঁকিতে রয়েছে, এটি নিখরচায়িত হয়নি বা উন্নীত হয়নি। সুতরাং আপনি এটি ঝুঁকি ছাড়াই আপনার নিজের প্রশ্নে স্থানান্তর করতে পারেন। এছাড়াও, ইতিমধ্যে এটি সম্পর্কে কোনও প্রশ্ন আছে কিনা তা পরীক্ষা করে নকলগুলি এড়ানোর চেষ্টা করুন।

— এমিল বার্গারন

Answer 18

এই সমস্যাটির কাছে যাওয়ার বিকল্প উপায় হ'ল ডেটা অ্যাট্রিবিউট ব্যবহার করা যা প্রকৃতির দ্বারা স্বতন্ত্র।

আপনি এই জাতীয় উপাদানগুলির রঙ নির্ধারণ করতে চান: $el.attr('data-color', 'red');

এবং আপনি এটি সিএসএসের মতো করে স্টাইল করবেন: [data-color="red"]{ color: tomato; }

এটি ক্লাসগুলি ব্যবহারের প্রয়োজনকে উপেক্ষা করে, যা পুরাতন ক্লাসগুলি অপসারণের প্রয়োজনীয়তার পার্শ্ব-প্রতিক্রিয়া রাখে।