Localizing functions to specific element

[Jared]

Hello all, I developed pop-out slider menu that builds itself from the CSS rules and HTML content. Unfortunately I designed it around a $('.menuElement .uniqueMenuClass') strategy. Basically I have a handful of menus that do the same thing but with multiple copies of the pop-out menu script plugin with renamed '.uniqueMenuClass' for the respective menus. Example:

$('.sliderMenu .menuOne').ready(function buildSlider(){	 var sliderWidth = $('.sliderMenuElement .menuOne').width();	 // A series of CSS dependent variables...	 $('.sliderMenuElement .menuOne').mouseenter(function animatedStuff(){		  //series of animations triggered	 });}

I'd then go back and copy/paste the whole thing with .menuTwo. Stupid, I know. Now, I'm trying to do something like this...

$('.sliderMenu').ready(function buildSlider(){	 var sliderWidth = $(this).find('.sliderMenuElement').width();	 //Series of CSS dependencies...	 $(this).find('sliderMenuElement').mouseenter(function animatedStuff(){		  //series of animations triggered	 });});

The problem is that .find() runs through ALL of the menuSlider's. Should I assign a unique ID to the menus and all their descendants and store the ID in all the variables and functions? Is there a way to traverse just within the $(this) element? or clear all the variables so the next menu starts clean-slate? Is this why I should have structured with lists instead of nested divs? Children aren't practical because I'm accessing a number of elements at different levels in the tree; the examples above are very simplified. Appreciate the help! Here's a link to a test version... which takes a while to load because of the multiple script references: www.jaredadradtke.com/testersite/index.html And please no comments on the reel labeled 'webdesign' Also... here's an example of the HTML:

<div class="autoSlider">   <div class="slideCont" style="top:0px;">      <div class="sliderName">Reels</div>      <div class="sliderInitial">         <div class="slideEndCap leftCap"></div>         <div class="slideEndCap rightCap"></div>            <div class="thumbCont reels">               <div class="slideThumb reels">                  <span class="thumbCaption">Motion Design</span>               </div>               <div class="slideThumb reels">                  <span class="thumbCaption">Cinematography</span>               </div>               <div class="slideThumb reels">                  <span class="thumbCaption">Web Design</span>               </div>               <div class="slideThumb reels">                  <span class="thumbCaption">Color Grading</span>               </div>            </div>      </div>   </div></div>