cómo pedir elementos en un evento usando jquery

Question

Tengo una situación en la que quiero colocar ciertos elementos en función de un evento. Por ejemplo:

<div id="leftBox"> 
    <div class="green">GREEN</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
</div> 



<div id="rightBox"> 
    <div class="green">GREEN</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
    <div class="green">GREEN</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
    <div class="green">GREEN</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
</div> 

cuando ratón sobre en #leftBox .green, quiero todos los elementos en #rightBox con .green en la parte superior, como:

<div id="rightBox"> 
    <div class="green">GREEN</div> 
    <div class="green">GREEN</div> 
    <div class="green">GREEN</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
    <div class="blue">BLUE</div> 
    <div class="red">RED</div> 
</div> 

y como la misma para .Blue y .red

Answer 1

$(document).ready(function(){ 

    $("div#leftBox div").mouseover(function(){ 

     $("div#rightBox ."+$(this).attr('class')).each(function() { 

      $("div#rightBox").prepend($(this)); 
     }); 

    }); 

}); 

Esto también funciona bien, se puede comprobar la demo aquí, http://jsfiddle.net/S8TXq/

Si desea conservar los otros elementos de orden, apenas probar este

$(document).ready(function(){ 

    $("div#leftBox div").mouseover(function(){ 
     main = $('#rightBox div').clone(true); 
     $("div#rightBox ."+$(this).attr('class')).each(function() { 

      $("div#rightBox").prepend($(this)); 
     }); 

    }).mouseout(function() { 
    $('#rightBox').empty().append(main);}); 

}); 

http://jsfiddle.net/S8TXq/5/

Answer 2

Prueba esto:

var main, address; 
    $('#leftBox div').mouseenter(function() { 
     address = $(this).attr('class'); 
     var stack = [], 
     tmp = [], 
     total = []; 
     main = $('#rightBox div').clone(true); 
     stack = $('#rightBox div.'+ address +'').remove(); 
     tmp = $('#rightBox div'); 
     total = $.merge(stack, tmp); 
     $.each(total, 
     function() { 
      $(this).appendTo('#rightBox').show(); 
     }) 
    }).mouseout(function() { 
     $('#rightBox').empty().append(main);});