添加和删​​除类时面临奇怪的问题 [英] Facing weird problem while adding and removing class

问题描述

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

i have below function which is being used to initialize a widget.

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

它的作用是在小部件的左上角附加一个减号图标。
i有一些ajax调用，因为这个函数被多次调用并多次附加一个减号图标。

what it does is append a minus icon at the top left corner of the widget. i have some ajax call because of that this function get called multiple time and append a minus icon multiple times.

我想重新编写这个函数这样一种方式，所以它被调用多少次，只将一个减号图标附加到标题中。

i尝试了一种方法，但它没有用。

i am tring to re-write this function in such a way, so that how many time it's get called, append only one minus icon into header.
i tried fallowing approach but it didn't work.

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最后添加一个减号图标，但它对我不起作用。

what i am tring is remove all span with class name span.ui-icon ui-icon-minusthick and finally append a minus icon, but it's not worked for me.

编辑
i以这种方式调用此函数 -

Edit i am calling this function in this way-

$('.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 Information</div>
            <div class="div_content" id="LINEITEM_HEADER_CONTENT">

            </div>  
</div>

第二次调用html将保持不变只是类会从 div_portlet <更改/ code>到 div_portlet_inne r，对于其他类的方式相同。
我已经在js文件中写了这个函数。

for second call html will remain same just classes will get change from div_portlet to div_portlet_inner, in the same way for other class. i have written this function in a js file.

任何帮助或建议，以便我能实现我的目标将受到高度赞赏。
请大家帮我解决这个问题。
提前致谢!!!!!

any help or suggestion so that i can achieve my goal will be highly appreciated. Please guys help me out i got stuck at this point. Thanks in advance!!!!!

推荐答案

ʞɔɐɯɹoↃɔWsǝɯɐs为这个问题提供了一个很好的解决方案，但这里是解释为什么你的尝试不起作用：

ʞɔɐɯɹoↃɔW sǝɯɐſ gave a good solution to this problem, but here is an explanation why your attempt didn't work:

选择器的第一部分'span.ui-icon ui-icon-minusthick'正在寻找一个带有 ui-icon 的 span ，如你所愿，但第二个part查找< ui-icon-minusthick> 类型的元素，它显然不存在。要选择具有多个类名的元素，请将它们全部添加到同一个选择器中，就像在CSS中一样：

The first part of the selector 'span.ui-icon ui-icon-minusthick' is looking for a span with class ui-icon, as you intended, but the second part looks for an element of type <ui-icon-minusthick> which obviously doesn't exist. To select an element with multiple class names, add them all to the same selector just like you would in CSS:

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

当然，其余的代码因为 find（$ minusthick）将无能为力，因此jQuery链的其余部分将没有可操作的上下文。这将（我认为）按预期工作：

Of course, the rest of you code would be a no-op since find($minusthick) will do nothing and therefore the rest of the jQuery chain will have no context in which to operate. This would (I think) work as you expected:

$('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（） 。

The extra end() call returns the jQuery object to the first selector, in this case div.div_header and there is no need for the final end().

这篇关于添加和删​​除类时面临奇怪的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！