Удалите все классы, начинающиеся с определенной строки.

javascript jquery css

100662 просмотра

15 ответа

2900 Репутация автора

У меня есть div, у id="a"которого может быть любое количество классов, связанных с ним, из нескольких групп. Каждая группа имеет определенный префикс. В javascript я не знаю, какой класс из группы находится в div. Я хочу, чтобы очистить все классы с заданным префиксом, а затем добавить новый. Если я хочу удалить все классы, начинающиеся с «bg», как это сделать? Что-то вроде этого, но это действительно работает:

$("#a").removeClass("bg*");
Автор: Brad Источник Размещён: 11.09.2008 10:32

Ответы (15)


11 плюса

64858 Репутация автора

Для этого вам не нужен какой-либо специальный код jQuery. Просто используйте RegExp для их замены:

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

Вы можете изменить это для поддержки любого префикса, но более быстрый метод выше, поскольку RegExp будет скомпилирован только один раз:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}
Автор: Prestaul Размещён: 11.09.2008 10:36

0 плюса

2900 Репутация автора

Ответ Престола был полезен, но для меня это не совсем сработало. Способ jQuery для выбора объекта по id не работал. Мне пришлось использовать

document.getElementById("a").className

вместо

$("#a").className
Автор: Brad Размещён: 12.09.2008 01:19

57 плюса

28188 Репутация автора

Решение

С jQuery фактический элемент DOM имеет индекс нулевой, это должно работать

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');
Автор: Pat Размещён: 12.09.2008 09:05

5 плюса

0 Репутация автора

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html говорит:

... и .removeClass () удалят все классы ...

Меня устраивает ;)

ура

Автор: Ivan Размещён: 09.03.2009 06:03

0 плюса

762 Репутация автора

Я также использую hyphen'- и цифры для имени класса. Поэтому моя версия включает '\ d-'

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');
Автор: Jamland Размещён: 19.07.2010 08:10

29 плюса

1418 Репутация автора

Я написал простой плагин jQuery - alterClass , который удаляет групповой класс. Опционально добавит классы.

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 
Автор: Pete B Размещён: 24.12.2011 12:59

103 плюса

9192 Репутация автора

Разложение регулярных выражений на границе слова \bне является лучшим решением для этого:

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

или как jQuery mixin:

$.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();
Автор: sarink Размещён: 31.05.2012 02:17

1 плюс

2576 Репутация автора

Я знаю, что это старый вопрос, но я нашел новое решение и хочу знать, есть ли у него недостатки?

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');
Автор: Jan.J Размещён: 28.09.2012 06:54

0 плюса

2020 Репутация автора

(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);
Автор: Rob Размещён: 19.12.2012 02:47

-6 плюса

9 Репутация автора

$("#element").removeAttr("class").addClass("yourClass");
Автор: majorsk8 Размещён: 13.02.2013 02:22

9 плюса

12964 Репутация автора

Использование 2 - й подписи из $.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>​]
Автор: abernier Размещён: 05.03.2013 10:13

2 плюса

5496 Репутация автора

Я искал решение по той же проблеме. Чтобы удалить все классы, начиная с префикса «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_');
Автор: Pawel Размещён: 14.10.2013 08:18

2 плюса

0 Репутация автора

Подход, который я использовал бы с помощью простых конструкций 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");
Автор: user4661317 Размещён: 12.03.2015 06:00

0 плюса

1413 Репутация автора

В одной строке ... Удаляет все классы, которые соответствуют регулярному выражению someRegExp

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});
Автор: Adam111p Размещён: 03.07.2017 11:23

0 плюса

111 Репутация автора

Для современных браузеров:

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

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));
Автор: Max Размещён: 26.10.2018 05:45
Вопросы из категории :
32x32