Удалите все классы, начинающиеся с определенной строки.
100662 просмотра
15 ответа
У меня есть div, у id="a"
которого может быть любое количество классов, связанных с ним, из нескольких групп. Каждая группа имеет определенный префикс. В javascript я не знаю, какой класс из группы находится в div. Я хочу, чтобы очистить все классы с заданным префиксом, а затем добавить новый. Если я хочу удалить все классы, начинающиеся с «bg», как это сделать? Что-то вроде этого, но это действительно работает:
$("#a").removeClass("bg*");
Автор: Brad
Источник
Размещён: 17.05.2019 03:28
Ответы (15)
57 плюса
С jQuery фактический элемент DOM имеет индекс нулевой, это должно работать
$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');
Автор: Pat
Размещён: 12.09.2008 09:05
103 плюса
Разложение регулярных выражений на границе слова \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
29 плюса
Я написал простой плагин jQuery - alterClass , который удаляет групповой класс. Опционально добавит классы.
$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
Автор: Pete B
Размещён: 24.12.2011 12:59
11 плюса
Для этого вам не нужен какой-либо специальный код 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
9 плюса
Использование 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
5 плюса
http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html говорит:
... и .removeClass () удалят все классы ...
Меня устраивает ;)
ура
Автор: Ivan Размещён: 09.03.2009 06:032 плюса
Я искал решение по той же проблеме. Чтобы удалить все классы, начиная с префикса «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 плюса
Подход, который я использовал бы с помощью простых конструкций 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
1 плюс
Я знаю, что это старый вопрос, но я нашел новое решение и хочу знать, есть ли у него недостатки?
$('#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 плюса
Ответ Престола был полезен, но для меня это не совсем сработало. Способ jQuery для выбора объекта по id не работал. Мне пришлось использовать
document.getElementById("a").className
вместо
$("#a").className
Автор: Brad
Размещён: 12.09.2008 01:19
0 плюса
Я также использую hyphen'- и цифры для имени класса. Поэтому моя версия включает '\ d-'
$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');
Автор: Jamland
Размещён: 19.07.2010 08:10
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);
Автор: Rob
Размещён: 19.12.2012 02:47
0 плюса
В одной строке ... Удаляет все классы, которые соответствуют регулярному выражению someRegExp
$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});
Автор: Adam111p
Размещён: 03.07.2017 11:23
0 плюса
Для современных браузеров:
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
-6 плюса
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- jquery Получение идентификатора элемента, который вызвал событие
- css Создание закругленных углов с помощью CSS
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?