Geek Answers Handbook

How to arrange elements in an event using jquery

I have a situation where I want to place certain elements based on an event. For instance:

<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 click on # leftBox.green , I want all the elements in the #rightBox with .green on top, for example:

<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 similarly for .blue and .red

+5
source share
2 answers
$(document).ready(function(){

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

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

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

    });

});

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

If you want to keep a different order of the elements, 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/

+2
source

:

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

More articles:


All Articles