Question

我目前正在开发一个JQuery应用程序供我个人使用，作为一种快捷方式，我根据列表中的最后一个类做出决定，该类始终是各种类型的标识符。这已经在很多地方完成了：

$("#myelement").attr('class').split(/\s+/).pop()

元素的类类似于：

class1 class2 class_with_id

问题是，现在我在代码中有一个地方，我试图在列表中添加一个类，我通常会这样做：

$("#myelement").addClass("newclass")

然而，这使得类看起来像这样：

class1 class2 class_with_id newclass

稍后抓取标识符类失败。我得到了它的工作：

$("#myelement").attr('class', "newclass " + $("#myelement").attr('class'))

将它添加到开头：

newclass class1 class2 class_with_id

我有两个问题，都是相关的：

这是最简单/最简单的方法吗？
是否有一种简单的方法可以在集合中间添加类而无需进行花哨的字符串操作。即说我希望它成为第二个元素：
```
class1 class2 newclass class_with_id
```

Answer 1

正如评论中所提到的，为了这个目的，最好使用 data-* attributes ，因为像现在这样使用类属性不是一个好习惯它不是为这些案件而做，例如替换：

$("#myelement").attr('class').split(/\s+/).pop();

通过：

$("#myelement").data('with-id');

获取属性data-with-id，并按以下方式添加：

$("#myelement").data('with-id','some value');

而不是：

$("#myelement").addClass("newclass");

希望这有帮助。

Answer 2

是

不是我知道的。

class属性是一个字符串，所以如果没有某种形式的字符串操作，我无法看到任何方法来执行你想要的东西。

var original = 'class1 class2 class_with_id';
var newClass = 'new_class';
var index = original.lastIndexOf(' ');
var updated = original.slice(0, index) + ' ' + newClass + original.slice(index);

会给你class1 class2 new_class class_with_id。

另一种选择是为字符串创建自己的拼接或插入方法。

String.prototype.insert = function (index, string) {
  if (index > 0)
    return this.substring(0, index) + string + this.substring(index, this.length);
  else
  return string + this;
};

var original = 'class1 class2 class_with_id';
var newClass = 'new_class';
var index = original.lastIndexOf(' ');
var updated = original.insert(index, ' ' + newClass);

注意：正如Karl-AndréGagnon所说..你最好使用自定义数据属性而不是当前的方法。您可能会发现您的方法限制您使用任何修改类的插件。

Answer 3

我不完全确定你为什么要使用这些课程。但是假设由于某种原因你不能像使用某些建议那样使用数据而你更喜欢使用类，你可以创建一个jquery函数，以便能够轻松地调用它。

$.fn.addClassAt = function(index, newClass){
    var classArray = $(this).attr('class').split(' ');
    classArray.splice(index, 0, newClass);
    var newClassStr = classArray.join(' ');
    return $(this).attr('class', newClassStr);
}

您现在可以将其用作

$（＆＃34;＃myElement＆＃34;）。addClassAt（2，＆＃39; newClass＆＃39;）

插入班级列表中间

3 个答案: