[英]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);
};
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.
我有一些ajax调用,因为这个函数被多次调用并多次附加一个减号图标。
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. 我要删除的是使用类名span.ui-icon ui-icon-minusthick删除所有span,最后添加一个减号图标,但它对我不起作用。
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是 -
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>
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. 对于第二次调用html将保持相同只是类将从
div_portlet
更改为div_portlet_inne
r,对于其他类也是如此。 i have written this function in a js file. 我已经在js文件中写了这个函数。
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!!!!!
提前致谢!!!!!
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. 不确定正在使用什么变量
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);
}
};
ʞɔɐɯɹoↃɔW sǝɯɐſ gave a good solution to this problem, but here is an explanation why your attempt didn't work: ʞɔɐɯɹoↃɔWsǝɯɐs为这个问题提供了一个很好的解决方案,但这里有一个解释为什么你的尝试不起作用:
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. 选择器
'span.ui-icon ui-icon-minusthick'
的第一部分正在寻找带有类ui-icon
的span
,如你所愿,但第二部分寻找类型为<ui-icon-minusthick>
的元素这显然不存在。 To select an element with multiple class names, add them all to the same selector just like you would in CSS: 要选择具有多个类名的元素,请将它们全部添加到同一个选择器中,就像在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. 当然,你的其余代码将是一个无操作,因为
find($minusthick)
将什么都不做,因此jQuery链的其余部分将没有操作的上下文。 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()
. 额外的
end()
调用将jQuery对象返回给第一个选择器,在本例中为div.div_header
并且不需要最终的end()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.