как упорядочить элементы по событию, используя jquery

Question

У меня есть ситуация, когда я хочу расположить определенные элементы на основе события. Например:

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

когда наведу курсор мыши на # leftBox .green , я хочу, чтобы все элементы в # rightBox с .green сверху, например:

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

и аналогично .blue и .red

Answer 1

$(document).ready(function(){

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

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

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

    });

});

Это также отлично работает, вы можете посмотреть демо здесь, http://jsfiddle.net/S8TXq/

Если вы хотите сохранить порядок других элементов, попробуйте это

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

Попробуйте это:

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