Question

我有以下HTML ....

<div id="banner">
    <img class="img1" src="" />
    <img class="img2" src="" />
    <img class="img3" src="" />
    <img class="img4" src="" />
</div>
<ul>
    <li class='li1'>one</li>
    <li class='li2'>two</li>
    <li class='li3'>three</li>
    <li class='li4'>four</li>
</ul>

当我点击.li3（三）时，之前的图片.img1, .img2应该从.img4移到最后，即此处。输出应该是这样的：

<div id="banner">         
        <img class="img3" src="" />
        <img class="img4" src="" />
        <img class="img1" src="" />
        <img class="img2" src="" />
</div>

我对此一无所知，我怎么能这样做？

更新

我从下面提供的答案中遇到一个小问题，即当我使用插入的代码时，我正在使用插件，当我点击这样的代码时会反复附加图像：

<div id="banner">         
            <img class="img3" src="" />
            <img class="img4" src="" />
            <img class="img1" src="" />
            <img class="img2" src="" />
            <img class="img2" src="" />
            <img class="img1" src="" />
            <img class="img2" src="" />
            <img class="img3" src="" />
    </div>

我怎么能删除以前的？

Answer 1

尝试

var $b = $('#banner');
$('ul li').click(function(){
    var idx = $(this).index();
    $b.find('img:lt(' + idx + ')').appendTo($b)
});

演示：Fiddle

Answer 2

你可以这样做：

$('.li').click(function(){
    var index = $(this).index(), //get the index of the clicked li.
              $banner = $('#banner');
    $banner.find(".img:gt(" + (index-1) + ")").prependTo($banner); //get all the img greater than its index -1 and prepend it to the parent will reposition them.
 });

<强> Fiddle

为了便于选择，我们给了li和imgs的共同课程

将当前图像的后向图像向前移动

2 个答案: