Facing weird problem while adding and removing class

Question

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

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

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.

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 corresponding to this is-

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>

for second call html will remain same just classes will get change from div_portlet to div_portlet_inne r, 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!!!!!

Answer 1

Not sure what variable o is being used for - but the general point of my alteration below is to check to see if the class has been applied already, using the jQuery hasClass() function.

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

Answer 2

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

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

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

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() .