swapping div tag with previous one?

Question

$.fn.swapWith = function (selector) {
    var placeholder = $('<div id="placeholder">').insertAfter(selector);
    $(selector).insertAfter(this);
    placeholder.after(this).remove();
};


var el = $('#4');
el.swapWith(el.nextAll('.' + el.attr('class') + ':first'));

@Box9: can i make this code to swap with previous div. what code change is needed

Answer 1

You can try this. And this is the final one! Click on div to see the effect

<script src="jquery.js"></script>
<style>
    .outmost{
        width: 100%;
        height: 100px;          
        margin-top: 10px;
    }

    .inner{
        width: 100%;
        background: #A124C2;
        height: 20px;           
        margin-top: 10px;

    }

    #div1{  background: red; }
    #div2{  background: green; }
    #div3{  background: blue; }
    #div4{  background: yellow; }       
    #div5{  background: black; color: white; }      
</style>

<script>
$(function(){
    //function trigger on click of outer class
    $('.outmost').click(
        function(){
            $(this).insertBefore($(this).prev());
        }
    )
    //$('#div2').insertBefore($('#div2').prev());

})
</script>


<div id="div1" class="outmost">
    <h1>div 1</h1>
    <div class="inner">inner 1</div>
    <div class="inner">inner 1</div>    
</div>
<div id="div2" class="outmost">
    <h1>div 2</h1>
    <div class="inner">inner 2</div>
    <div class="inner">inner 2</div>    
</div>
<div id="div3" class="outmost">
    <h1>div 3</h1>
    <div class="inner">inner 3</div>
    <div class="inner">inner 3</div>    
</div>
<div id="div4" class="outmost">
        <h1>div 4</h1>
    <div class="inner">inner 4</div>
    <div class="inner">inner 4</div>    
</div>
<div id="div5" class="outmost">
    <h1>div 5</h1>
    <div class="inner">inner 5</div>
    <div class="inner">inner 5</div>
</div>