JQuery: Удалить и заново Добавить Классы

Question

Я искал совсем немного, прежде чем задавать этот вопрос, но я могу быть поиск/задаю неправильный вопрос:

Я хочу, чтобы выбрать последние два класса элемент (который имеет несколько классов и неизвестное количество классов) и сохраняет это в переменной. Затем я хочу удалить эти два класса и добавить их обратно в более позднюю точку (например, toggleClass). Первый класс известен, а второй класс неизвестен.

Например:

<div class="c1 c2 c3 c-unknown"></div> 

Я хотел бы, чтобы выбрать c3 и c-unknown

Я попытался split() и, кажется, как решение, но я не мог заставить его работать.

Я ценю любую помощь/рекомендации, которые вы можете предложить.

Answer 1

Вы можете хранить их на сам элемент, позволяющий выделить несколько экземпляров

После решения не нужны классы, чтобы быть в любом определенном порядке или независимо от того, сколько классов находятся на элементе.

$('.c1').each(function() { 
    /* array of classes on elemnt*/ 
    var classes = $(this).attr('class').split(' '); 
    /* remove the targeted selector from array */ 
    classes.splice(classes.indexOf('c1'), 1); 
    /* remove the extra classes from element and store */ 
    $(this).removeClass(classes.join(' ')).data('classes', classes); 

}); 

Для конкретного элемента можно также использовать attr(function)

$('.c1.Specific').attr('class', function(_, existingClasses){  
     var classes = existingClasses.split(' ');   
     classes.splice(classes.indexOf('c1', 1)); 
     $(this).data('classes', classes); 
     return 'c1'; 
}); 

Затем повторно использовать сохраненные классы

var $el = $('.c1:first'); 
$el.addClass($el.data('classes').join(' ')) 

DEMO

Answer 2

Я считаю, что это то, что вы пытаетесь сделать.

var ele = document.getElementsByClassName('c1'), 
    classes = ele[0].className, 
    classArr = classes.split(' '), 
    spliceIndex = classArr.length - 2, 
    last2Classes = classArr.splice(spliceIndex, 2); 

Вот рабочий fiddle

Если вы пытаетесь удалить классы, которые вы можете использовать JQuery или вы могли бы просто использовать свойство Classname DOM-элемента и установить его в зависимости от того, как массив классов вы хотите использовать. Вы бы использовали метод массива .toString() для любого массива, и он предоставит вам строковое представление классов.

Answer 3

Вероятно, самый простой способ, чтобы получить последние два класса:

var lastTwoClasses = $('.c1').attr('class').split(/\s+/).slice(-2).join(' '); 

Переключение (например, с помощью кнопки id="btn"):

$('#btn').click(function(){ 
    $('.c1').toggleClass(lastTwoClasses); 
}); 

JSFiddle

---

EDIT. И еще один способ:

$('.c1').each(function(){ 
    var classes = $(this).attr('class').split(/\s+/).slice(-2).join(' '); 
    $(this).click(function(){ 
     $(this).toggleClass(classes); 
    }); 
}); 

JSFiddle

Answer 4

Ответ здесь может помочь вам получить часть функциональности вам нужно: Get first and last class with jQuery

Начиная с этого, вы можете использовать раскол, и removeClass, подобный этому (текст примера и css добавлены для демонстрационных целей):

function removeTheClasses(el) { 
 
    var classes = el.attr("class").split(/\s/); 
 
    
 
    var second_to_last = classes[classes.length - 2]; //second to last class 
 
    var last = classes[classes.length -1]; //last class 
 
    
 
    el.removeClass(second_to_last, last); 
 
} 
 

 
$('button').click(function() { 
 
    removeTheClasses($('.c1')); 
 
});

.c-unknown {font-weight:bold} 
 
.c3 {color:pink}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="c1 c2 c3 c-unknown"> 
 
    ABC 
 
</div> 
 
<br/> 
 
<button>Remove the last two classes</button>

Для того, чтобы добавить эти же классы обратно (переключаясь), вы должны сохранить запись о недавно снятых классов. Для этого потребуется:

1. толкая значения first & last переменных печенья или веб-хранилище (если обработка одновременно нескольких элементов) или
2. одна переменная JavaScript выше объема «removeTheClasses '(если вы просто управляете одним элементом за раз).