插入类中间列表

Insert In Middle Of Class List

本文关键字：列表 中间 插入      更新时间：2023-09-26

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

我有两个问题，都相关：

  1. 这是将其添加到开头的最简单/最简单的方法吗？

  2. 有没有一种简单的方法可以在集合中间添加类，而无需进行花哨的字符串操作。 即说我希望它是倒数第二个元素：

    class1 class2 newclass class_with_id

如注释中所述，最好为此目的使用 data-* 属性，因为像现在这样使用 class 属性不是一个好习惯，它不是针对这些情况制作的，所以例如替换：

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

由：

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

要获取属性data-with-id，请通过以下方式添加：

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

而不是：

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

希望这有帮助。

  1. 是的。

  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);

注意：正如卡尔-安德烈·加农所说。与当前方法相比，最好使用自定义数据属性。您可能会发现您的方法限制了您使用任何修改类的插件。

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

相关文章：