如何使用 jquery 对事件中的元素进行排序

Question

我有一种情况，我想根据事件 position 某些元素。 例如：

<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中的所有元素都在顶部，例如：

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