Question

我有一些帮助和一些关于如何删除类名的建议。

这些工作在小提琴，但我的应用程序有点不同。我有以下内容：

<span id="refType_1" class="refType indent_02">Link Header</span>

我的javascript看起来像这样：

if (action == "Edit") {
   var parent = linkObj.closest("tr");
   parent.find(".refType").html($("#Type :selected").text());  // 1
   parent.find(".refType").className.replace(/indent_\d+($|\s)/, "xxx"); 
   parent.find(".refType").trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));

我尝试了用“”替换类名的最后两种方法，但两者都给了我一个错误。例如，最后一个方法提供以下内容：

SCRIPT438: Object doesn't support property or method 'trim'

我认为我99％的目标是让它发挥作用，但我会很感激。到目前为止，我尝试了几种不同的方法，但仍然无效。

请注意带注释// 1的行确实有效。我可以根据需要更改跨度的内容。什么行不通的是：

parent.find(".refType").className.replace(/indent_\d+($|\s)/, "xxx");   or
parent.find(".refType").trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));

这是我尝试从文本中删除文本indent_xx的两种不同尝试。

Answer 1

您没有正确实现上一个答案中的代码。

你不能做其中任何一个因为.className是DOM对象的属性，而不是jQuery对象的属性，你甚至没有将.replace()的结果赋给任何东西：

parent.find(".refType").className.replace(/indent_\d+($|\s)/, "xxx"); 
parent.find(".refType").trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));

如果您按照上一个答案中的设计模式进行操作，则可以使用：

parent.find(".refType").each(function() {
    this.className = $.trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " ")); 
});

如果你知道除了.refType之外你想要保留的那些对象上没有其他类，你可以做得更简单：

parent.find(".refType").attr("class", "refType");

这只是将整个类名设置为“refType”，从而消除了可能存在的任何其他类。

您还可以创建一个jQuery插件，将其放在初始化代码中的某个位置：

$.fn.removeIndentClasses = function() {
    this.each(function() {
        this.className = $.trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " ")); 
    });
    return this;
}

然后，你的代码就是这样：

parent.find(".refType").removeIndentClasses();

Answer 2

主要问题是您正在尝试访问未为jQuery对象定义的属性。对于className，它可用于DOM元素，对于trim，它可用于字符串（如果浏览器支持它）。

我假设您希望代码适用于所有.refType元素。如果是这样的话：

parent.find(".refType").each(function() {
    this.className = $.trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));
}).html($("#Type :selected").text());

这应该替换以parent.find开头的三行。在each循环内，this引用DOM元素而不是jQuery对象，因此它将具有className属性。

您需要实际设置className（this.className = newClassName）的值，而不是简单地修改它。

另请注意，我使用了jQuery的$.trim函数，因为较旧的浏览器不支持本机trim函数。

修改（见评论）

我认为，根据您的评论，您的意思是只有一个.refType元素，因此您不希望使用each循环。您可以使用get方法或数组索引从jQuery对象访问底层DOM元素：

parent.find(".refType")[0].className = newClassName;

Answer 3

你的trim语法是错误的 - 它是存储在jQuery命名空间中的函数，而不是jQuery方法。另外，替换不是一个变异函数（即它创建一个新的字符串而不是改变原始的字符串）。最后，className是在DOM节点上定义的属性，但不是DOM节点的jQuery包装器，因此您需要通过获取存储在jQuery集合中的第一个节点来获取实际的DOM节点。

parent.find(".refType")[0].className = parent.find(".refType")[0].className.replace(/(^|\s)indent_\d+($|\s)/, " ");

可以在没有修剪的情况下工作（这几乎肯定不是必要的，因为类名中的尾随空格通常对大多数应用程序没有任何影响）。但是，如果你真的想要修剪空白使用

var target = parent.find(".refType"),
    newClass = $.trim(target[0].className.replace(/(^|\s)indent_\d+($|\s)/, " "));
    target[0].className = newClass;

通过使用jQuery引用父类来修改类名

3 个答案: