Hi... I am trying to change the background color of the element and it's children.So I wrote a \[code\]function\[/code\]which is being called recursively.
Here are the some conditions that the element's background color should not be changed if it has an attribute \[code\]class="irmNDrdnVal"\[/code\] or \[code\]id="irmNDatePickerContainer"\[/code\].Here is the code:\[code\]<!DOCTYPE HTML PUBLIC><html><style> .newClass{ color:red; background:green; }</style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script><body><div id="main"> <span id= "drdn-box-ACNT" class="irmNDrdnInputBox" disabled= "true"> <input id="drdn-ip-ACNT" class="irmNDrdnInput" readOnly="readOnly" value="http://stackoverflow.com/questions/14079771/1 IA" type="text"> <span><img src="http://stackoverflow.com/sap/bc/bsp/sap/public/drdn-btn.gif"></span> </span> <div id= "drdn-val-ACNT" class="irmNDrdnVal"> <div> <ul> <li disabled= "true" key= ""> </li> <li disabled= "true" key= "1">1 IA</li> <li disabled= "true" key= "2">2 PB & CB</li> <li disabled= "true" key= "3">3 DM-P</li> <li disabled= "true" key= "4">4 DM-R</li> <li disabled= "true" key= "5">5 Cash App</li> </ul> </div> </div></div><script> function changeBgColor(_ele,_cls,_remove){ if(_remove){ _ele.removeClass(_cls); } else{ if(!_ele.hasClass('ui-resizable-handle') && !_ele.hasClass('irmNDrdnVal') && _ele.attr('id') != 'irmNDatePickerContainer'){ _ele.addClass(_cls); } } if(_ele.children().length > 0 && !_ele.hasClass('irmNDrdnVal') && _ele.attr('id') != 'irmNDatePickerContainer'){ changeBgColor(_ele.children(),_cls,_remove); } } $('div#main').each(function(){ changeBgColor($(this),'newClass',false); });</script></body></html>\[/code\]So I am checking that whether the particular element has class \[code\]irmNDrdnVal\[/code\].I will allow to change background if only it doesnt have class \[code\]'irmNDrdnVal'\[/code\].It is working every element except for one element.i.e\[code\]<span id= "drdn-box-ACNT" class="irmNDrdnInputBox" disabled= "true">\[/code\] Though it does not have class \[code\]'irmNDrdnVal'\[/code\], the \[code\]hasClass('irmNDrdnVal')\[/code\] method returns \[code\]true\[/code\] for the element. I am unable to understand whtz going wrong.Can somebody help me out.....Thanks in advance...
Here are the some conditions that the element's background color should not be changed if it has an attribute \[code\]class="irmNDrdnVal"\[/code\] or \[code\]id="irmNDatePickerContainer"\[/code\].Here is the code:\[code\]<!DOCTYPE HTML PUBLIC><html><style> .newClass{ color:red; background:green; }</style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script><body><div id="main"> <span id= "drdn-box-ACNT" class="irmNDrdnInputBox" disabled= "true"> <input id="drdn-ip-ACNT" class="irmNDrdnInput" readOnly="readOnly" value="http://stackoverflow.com/questions/14079771/1 IA" type="text"> <span><img src="http://stackoverflow.com/sap/bc/bsp/sap/public/drdn-btn.gif"></span> </span> <div id= "drdn-val-ACNT" class="irmNDrdnVal"> <div> <ul> <li disabled= "true" key= ""> </li> <li disabled= "true" key= "1">1 IA</li> <li disabled= "true" key= "2">2 PB & CB</li> <li disabled= "true" key= "3">3 DM-P</li> <li disabled= "true" key= "4">4 DM-R</li> <li disabled= "true" key= "5">5 Cash App</li> </ul> </div> </div></div><script> function changeBgColor(_ele,_cls,_remove){ if(_remove){ _ele.removeClass(_cls); } else{ if(!_ele.hasClass('ui-resizable-handle') && !_ele.hasClass('irmNDrdnVal') && _ele.attr('id') != 'irmNDatePickerContainer'){ _ele.addClass(_cls); } } if(_ele.children().length > 0 && !_ele.hasClass('irmNDrdnVal') && _ele.attr('id') != 'irmNDatePickerContainer'){ changeBgColor(_ele.children(),_cls,_remove); } } $('div#main').each(function(){ changeBgColor($(this),'newClass',false); });</script></body></html>\[/code\]So I am checking that whether the particular element has class \[code\]irmNDrdnVal\[/code\].I will allow to change background if only it doesnt have class \[code\]'irmNDrdnVal'\[/code\].It is working every element except for one element.i.e\[code\]<span id= "drdn-box-ACNT" class="irmNDrdnInputBox" disabled= "true">\[/code\] Though it does not have class \[code\]'irmNDrdnVal'\[/code\], the \[code\]hasClass('irmNDrdnVal')\[/code\] method returns \[code\]true\[/code\] for the element. I am unable to understand whtz going wrong.Can somebody help me out.....Thanks in advance...