插入中间类列表答案

【问题标题】：Insert In Middle Of Class List插入中间类列表
【发布时间】：2016-11-07 14:52:13
【问题描述】：

我目前正在开发一个供我个人使用的 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

我有两个相关的问题：

这是完成将其添加到开头的最简单/最简单的方法吗？
有没有一种简单的方法可以在不进行花哨的字符串操作的情况下将类添加到集合的中间。 IE。说我希望它是倒数第二个元素：
```
class1 class2 newclass class_with_id
```

【问题讨论】：

我认为您有问题，但您正在寻找的解决方案不是好的解决方案。而不是class_with_id，你应该使用data-with-id="id"...
我同意 Karl-Andre 的观点，如果您改用数据属性，则无需担心这一点。您仍然可以使用 [data-x] 选择器在 CSS 和 JavaScript 中定位数据属性，因此如果您将其设为 data-id，您可以使用 [data-id] 调用它。
有些人会发誓，按数据而不是按类的样式是不正确的，因为动态的数据属性不是语义内容。在我看来，这是完全合适的。

标签： javascript jquery html css attr

【解决方案1】：

我不完全确定您为什么要使用这些课程。但是假设由于某种原因您不能使用一些建议的数据并且您更喜欢使用类，您可以创建一个 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);
}

您现在可以将其用作

$("#myElement").addClassAt(2, 'newClass')

【讨论】：

【解决方案2】：

是的。

我不知道。

类属性是一个字符串，所以如果没有某种形式的字符串操作，我看不到任何方法来做你正在寻找的东西。

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 所说.. 与您当前的方法相比，您最好使用自定义数据属性。您可能会发现您的方法限制了您使用任何修改类的插件。

【讨论】：

【解决方案3】：

正如 cmets 中提到的，最好使用 data-* attributes 来实现此目的，因为像现在这样使用类属性不是一个好习惯，它不适用于这些情况，因此例如替换：

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

作者：

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

获取属性data-with-id，并添加：

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

而不是：

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

希望这会有所帮助。

【讨论】：