在添加和删除类时面临怪异的问题

问题描述

|  我有以下用于初始化小部件的功能。

jQuery.fn.initPortlet = function( parent_component,header,component ){
        var o = $(this[0])
        this.addClass(\"ui-widget ui-widget-content ui-corner-all\")
            .find(header)           
            .addClass(\"headertitle\")
            .addClass(\"align_center\")
            .addClass(\"defaultheadercolor\")
            .prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\')
            .end()
            .find(component);
};

它的作用是在小部件的左上角添加一个减号图标。 我有一些ajax调用，因为该函数被多次调用并多次附加减号图标。 我试图以这种方式重新编写此函数，以便调用该函数多少次，仅在标题中附加一个减号图标。 我尝试过休闲方式，但是没有用。

var $minusthick = $(\'span.ui-icon ui-icon-minusthick\');
$(\'div.div_header\').find($minusthick).remove().prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\').end();

我正在做的是删除所有带有类名称span.ui-icon ui-icon-minusthick的span，最后附加一个减号图标，但这对我不起作用。 编辑 我以这种方式调用此功能-

$(\'.div_portlet\').initPortlet(\'.div_portlet\',\'.div_header\',\'.div_content\')   
            $(\'.div_portlet_inner\').initPortlet(\'.div_portlet_inner\',\'.div_header_inner\',\'.div_content_inner\');

与此对应的html是- 的HTML：

<div class=\"div_portlet\" id=\"LINEITEM_HEADER\" >
<div class=\"div_header\"><%=hu.getFrameURL(82,83)%> Line Item Header @R_137_4045@ion</div>
            <div class=\"div_content\" id=\"LINEITEM_HEADER_CONTENT\">

            </div>  
</div>

对于第二个调用，html将保持不变，只是类将从

div_portlet

变为

div_portlet_inne

r，其他类也是如此。 我已经在js文件中编写了此功能。 任何帮助或建议，使我可以实现自己的目标，将不胜感激。 请大家帮我解决这个问题。 提前致谢！！！！！     

解决方法

不确定使用哪个变量

o

-但是我下面的更改的基本要点是使用jQuery

hasClass()

函数检查该类是否已被应用。

jQuery.fn.initPortlet = function( parent_component,header,component ){
    var o = $(this[0])

    if (!this.hasClass(\'ui-widget\'))
    {
      this.addClass(\"ui-widget ui-widget-content ui-corner-all\")
        .find(header)           
        .addClass(\"headertitle\")
        .addClass(\"align_center\")
        .addClass(\"defaultheadercolor\")
        .prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\')
        .end()
        .find(component);
    }
};

    ,“这个问题”很好地解决了这个问题，但是以下是您尝试失败的原因的说明： 选择器

\'span.ui-icon ui-icon-minusthick\'

的第一部分正在按您的意图寻找类为

ui-icon

的

span

，但是第二部分则寻找类型

<ui-icon-minusthick>

的元素，该元素显然不存在。要选择具有多个类名的元素，请将它们全部添加到同一选择器中，就像在CSS中一样：

$(\'span.ui-icon.ui-icon-minusthick\')

当然，您的其余代码将是空手，因为

find($minusthick)

不会执行任何操作，因此jQuery链的其余部分将没有上下文可操作。 （我认为）这将按您的预期工作：

$(\'div.div_header\').find(\'span.ui-icon.ui-icon-minusthick\').remove().end().prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\');

额外的

end()

调用将jQuery对象返回到第一个选择器，在本例中为

div.div_header

，并且不需要最后的

end()

。