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 lastTwoClasses = $('.c1').attr('class').split(/\s+/).slice(-2).join(' ');

切换（例如使用按钮id="btn"）：

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

<强> JSFiddle

修改即可。还有另一种方式：

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

<强> JSFiddle

Answer 3

我相信这是你正在尝试做的事情。

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

这是一个有效的fiddle

如果您尝试删除类，可以使用jquery，或者只需使用dom元素的className属性，并将其设置为您想要使用的类的数组。您将在任一数组上使用数组方法.toString（），它将为您提供类的字符串表示。

Answer 4

这里的答案可以帮助您获得所需的部分功能： Get first and last class with jQuery

从那开始，你可以像这样使用split和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>

为了将这些相同的类添加回（切换），您必须保留最近删除的类的记录。这需要：

推送first＆amp;的价值观{cookie}或Web存储的last变量（如果一次处理多个元素），或者
在“removeTheClasses”函数范围之上的单个javascript变量（如果您一次只处理一个元素）。

jQuery：删除并重新添加类

4 个答案: