Как добавить класс в первую позицию с помощью jquery?

Question

У меня есть элемент с более чем 5 классами. Мне просто нужно заменить класс в первой позиции, не затрагивая остальных.

Я не хочу заменять все классы (я пробовал использовать .attr ('class', 'class1 class2 class3 class4 class5'), .prop, .switchclass и т. д.).

Answer 1

Для этого вам не нужно использовать jQuery: просто адрес DOM Element и его атрибут className. Например (в предположении $el является объектом JQuery завернутого aroung элемента, который вы хотите изменить):

$el[0].className = $el[0].className.replace(/^\S+/, replacementClass); 

Это заменяет первый класс $el с replacementClass строкой.

В качестве альтернативы, вы можете использовать attr сделать по существу то же самое:

$el.attr('class', function(_, cls) { 
    return cls.replace(/^\S+/, replacementClass); 
}); 

Answer 2

Вы можете использовать .toggleClass(), чтобы добавить/удалить класс или removeClass() для удаления класса, а затем использовать addClass(), чтобы добавить новый класс.

Пример: DOM:

<div class="a b c d"></div> 

JS:

var ele = $("div.a"); 
ele.removeClass("a").addClass("e"); 
// OR 
ele.toggleClass("a").addClass("e"); 

Answer 3

у вас есть это:

<p class='classA classB classC'></p> 

JQuery:

var classes = $('p').attr("class").split(" "); 
var newClass = 'myClassEdited'; 
var classes[0] = newClass; 
$('p').attr('class', classes.join(" ")); 

Edited DOM:

<p class='myClassEdited classB classC'></p> 

Answer 4

Вы добавляете класс в первый взгляд позиции на raina77ow ответа и другие ответы. но последний класс больше, чем у первого класса.

, например

class1 class2 class3 class4 class5 

class5 { 
    color:red 
} 

class1{ 
    color:green 

} 

так красный цвет будет применяться для всех текстовых class1 не полезно это фиктивная

Answer 5

далее Один из подходов:

// elem: DOM Node, on which the class-name will be toggled, 
 
// toggleClass: String, the class-name to toggle. 
 
function prependClassToggle(elem, toggleClass) { 
 
    // if the element currently had the passed-in class-name 
 
    if (elem.classList.contains(toggleClass)) { 
 
    // we remove it, using the classList API's remove() method: 
 
    elem.classList.remove(toggleClass); 
 
    } else { 
 
    // otherwise we concatenate the passed-in class-name with the 
 
    // string returned by the className property (and a space): 
 
    elem.className = toggleClass + ' ' + elem.className; 
 
    } 
 
} 
 

 
// document.querySelector() returns only the first element matching the selector, or null, 
 
document.querySelector('button') 
 
    // assigning event-handling behaviour for that <button>: 
 
    .addEventListener('click', function() { 
 
    // calling the function, passing in the <button>'s nextElementSibling, 
 
    // and the string of the classname to add: 
 
    prependClassToggle(this.nextElementSibling, 'classA'); 
 
});

div::before { 
 
    content: attr(class); 
 
}

<button>Toggle 'classA'</button> 
 
<div class="classB classC classD classE classF"></div>

Ссылки:

• EventTarget.addEventListener().
• Element.classList.
• Element.className.
• Node.nextElementSibling.

Answer 6

Его очень простая вещь. Используйте только

element.addClass ('YourClass');

для удаления любого класса

element.removeClass ('YourClass');