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：我可以让这段代码与之前的div交换。需要更改代码

Answer 1

你可以试试这个。 这是最后一个！点击div查看效果

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

用前一个交换div标签？

1 个答案: