Please help with changing child div class

In the following html:

<div id="ctl00_TopCart2_upCart">
		
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="TopCartCellAlign">
                        <div class="TopCartImageAlign"><a id="ctl00_TopCart2_hlViewCart" href="CartDetails.aspx"><img src="App_Themes/utenn/Images/cart.gif" alt="view cart" style="border-width:0px;" /></a></div>
                    </td>
                    <td class="TopCartCellAlign">

                        <span id="ctl00_TopCart2_lblTotalItems" class="TopCartItemsCountNumberDisplayed">0</span>
                        <span id="ctl00_TopCart2_Label1" class="TopCartItemsCountText">Item(s) totaling</span>
                        <span id="ctl00_TopCart2_lblTotalAmount" class="TopCartTotalAmount">$0.00</span>
                        
                    </td>
                </tr>
            </table>
        
	</div>

Open in new window




I need to change the styling for the div with class "TopCartImageAlign" to "SpecialTopCartCellAlign"

                    <td class="TopCartCellAlign">
                        <div class="TopCartImageAlign"><a id="ctl00_TopCart2_hlViewCart" href="CartDetails.aspx"><img src="App_Themes/utenn/Images/cart.gif" alt="view cart" style="border-width:0px;" /></a></div>
                    </td>


changes to:


                    <td class="SpecialTopCartCellAlign">
                        <div class=""><a id="ctl00_TopCart2_hlViewCart" href="CartDetails.aspx"><img src="App_Themes/utenn/Images/cart.gif" alt="view cart" style="border-width:0px;" /></a></div>
                    </td>




Must "td" have an id asigned for this to work?


There is also the following restriction:

-the div must be a descendant (child or grandchild) of a div with id containing the words "TopCart2"


LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
   $(".TopCartImageAlign", "div[id*='TopCart2']").removeClass("TopCartImageAlign").addClass("SpecialTopCartCellAlign");
0
 
leakim971PluritechnicianCommented:
What about :
$(".TopCartImageAlign").removeClass("TopCartImageAlign").addClass("SpecialTopCartCellAlign");
0
 
leakim971PluritechnicianCommented:
or (you change name of the class in your question, first time TopCartImageAlign and after : TopCartCellAlign) :
$(".TopCartCellAlign").removeClass("TopCartCellAlign").addClass("SpecialTopCartCellAlign");
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
Tom KnowltonWeb developerAuthor Commented:
TopCartImageAlign is used in other places and I don't want it changed in those places....just where the class "TopCartImageAlign" has a parent div with an id containing "TopCart2".

So changing the assigned div for say "TopCart1" would not be desired.

:)
0
 
Tom KnowltonWeb developerAuthor Commented:
I noticed you use two params in the first part:

  $(".TopCartImageAlign", "div[id*='TopCart2']").

Can you tell me more about what each param is for?  I mean, I think I know...but can you talk about a it some?
0
 
Tom KnowltonWeb developerAuthor Commented:
I was thinking about trying this:


  //$('div[id*="TopCart2"] > ')  blah blah

Would this be valid as well?
0
 
leakim971PluritechnicianCommented:
could you confirm it work first? thanks
0
 
Tom KnowltonWeb developerAuthor Commented:
Works just great!!
0
 
Tom KnowltonWeb developerAuthor Commented:
thx
0
 
leakim971PluritechnicianCommented:
$(".TopCartImageAlign", "div[id*='TopCart2']") similar to :
$("div[id*='TopCart2']").find(".TopCartImageAlign")
this return an array of jQuery object

removeClass and addClass is applied to all the jQuery objects of this array.

Check this page : http://api.jquery.com/jQuery/ 
jQuery( selector, [ context ]  )

my favorite page : http://api.jquery.com/category/selectors/
0
 
Tom KnowltonWeb developerAuthor Commented:
LK:


Thank you so much for this information!

I welcome any other sites you use on a regular basis for jQuery type questions, if you want to share additional sites!!


I own the following books by O'Reilly which are great:

http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/dp/0596159773

and

http://www.amazon.com/jQuery-Pocket-Reference-David-Flanagan/dp/1449397220/ref=sr_1_1?s=books&ie=UTF8&qid=1315845020&sr=1-1


but sometimes you are still a lot faster.   :)

0
 
leakim971PluritechnicianCommented:
yeah, I've some O'Reilly books, I love them too (Java, Oracle, TCP/IP, ...)

I found all the infos I need on the jQuery site itselft or for UI : http://jqueryui.com/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.