how to handle .nextAll() or .prevAll() - each element separately?

I am searching for something to make me able control separately each element returned by .prevAll() or .nextAll() jQuery methods.

Something like:

<div id="home">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

And something like:

$('#home .box').mouseover(function(){

var hovBox = $(this);
var prevAll = hovBox.prevAll();
var nextAll = hovBox.nextAll();

     nextAll.each(function(){

           // ...and do something with each returned element
           // NOT with ALL returned elements, just handle each separately
         开发者_如何转开发  // through some other type of selector
     });
});

Thank you for your help

---

$.each allows you access the DOM element using this:

nextAll.each(function(index){
    // ...and do something with each returned element
    $(this).fadeTo('fast', index/5);
});

Here's the Fiddle: http://jsfiddle.net/2MMGw/1/

http://api.jquery.com/each/

---

nextAll.each(function(index){
   //index=0 will be the first box after that one
   //index=1 will be the 2nd box 
   //index=2 will be the 3nd box 

   alert(index);
});

For eg, if you want a specific thing with the second one

  nextAll.each(function(index){
     //do something
    if (index==1)
    {
    $(this).hide(); //do specific thing
    }
    alert(index);
});

---

Is that somithing that you looking for

   nextAll.each(function(i){            
       if(i>0){
          $(this).css('color','#ff000');// will give color all elements after 1st element that you hover
        }

     });