如何使用 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);});