Question

我正在使用jQuery动态更改某些元素的位置。我找到了一些可以在这里工作的东西：https://stackoverflow.com/a/18593267/1419575，但如果索引号高于子计数，则该元素将离开父级。

有没有办法让孩子留在父元素内？

CSS

#hook-header {
    background: #dadada;
    margin: 10px;
    padding: 10px;
}

HTML

<header id="hook-header">
    <div id="ImTheFirstElement"><h1>This is the header hook</h1></div>
</header>

<div id="example-one">01</div>
<div id="example-nintynine">99</div>

的jQuery

$(document).ready(function () {
    $('#example-one').appendTo('#hook-header');

    $.fn.appendToIndex=function(to,index){
        if(! to instanceof jQuery){
            to=$(to);
        };
        if(index===0){
            $(this).prependTo(to)
        }else{
            $(this).insertAfter(to.children().eq(index-1));
        }
    };
    $('#ImTheFirstElement').appendToIndex($('#hook-header'),0) 
    $('#example-one').appendToIndex($('#hook-header'),1)  
    $('#example-nintynine').appendToIndex($('#hook-header'),99)
});

DEMO

Answer 1

如果eq(index)没有返回元素，请修改插件以使用最后一个元素

$(document).ready(function () {
    $('#example-one').appendTo('#hook-header');

    $.fn.appendToIndex=function(to,index){
        if(! to instanceof jQuery){
            to=$(to);
        };
        if(index===0){
            $(this).prependTo(to)
        }else{
            var el = to.children().eq(index-1);
            el = el.length ? el : to.children().last();
            $(this).insertAfter(el);
        }
    };
    $('#ImTheFirstElement').appendToIndex($('#hook-header'),0) 
    $('#example-one').appendToIndex($('#hook-header'),1)  
    $('#example-nintynine').appendToIndex($('#hook-header'),99)
});

FIDDLE

使用insertAfter挂钩元素，但保留在parent-jQuery中

1 个答案: