Изменение имени класса с помощью ссылки на родителя с jQuery

Question

У меня была некоторая помощь и некоторые рекомендации по удалению имени класса.

Previous answer

Они работали в скрипку, но мое приложение просто немного по-другому. У меня есть следующие:

<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. Внутри цикла eachthis относится к элементу DOM, а не к объекту jQuery, поэтому он будет иметь свойство className.

Вам нужно фактически установить значение className (this.className = newClassName), а не просто его изменять.

Также обратите внимание, что я использовал функцию jQuery $.trim, потому что старые браузеры не поддерживают встроенную функцию trim.

Редактировать (см комментарии)

Я думаю, что от Вашего комментария, что вы имеете в виду, что есть только один .refType элемент и, следовательно, вы не хотите использовать each петлю. Вы можете получить доступ к основным элементам DOM из объекта JQuery, используя либо метод get или массив индекса:

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

Answer 3

Вашего синтаксис для отделки неправильно - это функция хранится в пространстве имен JQuery, а не метод JQuery. Кроме того, замена не является мутационной функцией (т. Е. Создает новую строку, а не заменяет исходную). И, наконец, className является свойством, определенным на узлах DOM, но не для оберток jQuery для узлов DOM, поэтому вам нужно получить фактический узел DOM, получив первый, хранящийся в коллекции jQuery.

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;