how to order elements on an event using jquery

Question

I have a situation, where I want to position certain elements based on an event. For example:

<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>

when I mouse over on #leftBox.green , I want all elements in #rightBox with.green on top, like:

<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>

and like the same for .blue and .red

Answer 1

$(document).ready(function(){

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

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

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

    });

});

This also works fine, you can check the demo here, http://jsfiddle.net/S8TXq/

If you want to retain the other elements order, just try this

$(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

Try this:

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);});