How to allow for multiple UserControls to use this same jQuery

[mf1983]

I have a simple rotating element on a web page composed of nested divs, inside an ASP.NET UserControl. Works fine when only one control is present. However, multiple instances of the control are interfering with each other. The script is registered in code-behind, not being included twice. Here is the jQuery code:\[code\] $(document).ready(function () { var timer = null; $("div.divRotator").find("div:first-child").show(); //Wait 5 seconds then call rotate(); timer = setTimeout(rotate, 4000); function rotate() { var nextDiv = $("div.divRotator").find("div:visible").next("div"); if (nextDiv.html() == null) { //PROBLEM HERE!!! nextDiv = $("div.divRotator").find("div:first-child"); //console.log("rotating..."); } $("div.divRotator").find("div:visible").fadeOut(500, function () { nextDiv.show(); }); timer = setTimeout(rotate, 4000); }});\[/code\]This code will work fine if all the control have the same number of elements... but when they don't, things go wonky. The check to see if we should restart out rotation doesn't work, because nextDiv is actually composed of multiple elements now that there are multiple instances of the UserControl on the page.What's the best strategy here? Modify the div classes/IDs in code-behind and give each control separate javascript? That seems tedious and should be unnecessary. It seems like it would be much better to somehow modify the way nextDiv works, but my jQuery knowledge is failing me here... surely there is a simple solution to this?FYI,here's what my rendered content looks like:\[code\]<div class="divRotator"> <div style="display:none"> Some content </div> <div style="display:none"> Some more content </div> <div style="display:none"> you guessed it </div></div><div class="divRotator"> <div style="display:none"> Uh oh, now we got trouble <div></div>\[/code\]