-1

演示

我有以下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>

我怎样才能删除以前的？

4

2 回答 2

3

尝试

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

演示：小提琴

于 2013-09-11T03:34:37.733 回答
1

你可以这样做：

$('.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.
 });

小提琴

为了便于选择，只为 li 和 imgs 提供了一个通用类

于 2013-09-11T03:34:33.347 回答