Question

我有一个图像列表

<img src="image-1.jpg" />
<img src="image-2.jpg" />
<img src="image-3.jpg" />
<img src="image-4.jpg" />
<img src="image-5.jpg" />

最好的方法是重新排序它们，使图像-1位于底部？（但不一定是图像-1）

编辑最好不要使用像JQuery UI这样的东西我希望用尽可能少的代码来完成。

Answer 1

简单易用

$(function(){

    var parent=$("img").parent();
    $("img:first").appendTo(parent);

});

Answer 2

您可以使用jQuery UI实现此目的：

http://jqueryui.com/demos/sortable/

（假设您希望这是动态的，如果不是，您应该进一步解释具体情况）

Answer 3

如果您没有尝试创建动态可排序列表，而只是在寻找重新排序图像的方法。您可以尝试以下方法。

$("img[src$='image-1.jpg']").insertAfter("img[src$='image-5.jpg']");

这将允许您根据图像的src查找图像并移动它们。

http://api.jquery.com/category/manipulation/

查看可用于DOMinsertion的不同方法。

Answer 4

然后你想要这样的东西？它将1,2,3,4,5分为5,4,3,2,1

<div id="reorder">
    <img src="http://www.google.com.tr/images/srpr/logo3w.png" />
    <img src="http://l.yimg.com/a/i/ww/met/logo/20100909/yahoo_logo_tr.png" />
    <img src="http://www.rev2.org/wp-content/uploads/2009/06/bing-logo.png" />
    <img src="http://a.l.yimg.com/a/i/us/sch/yhs4/altavista_logo.png" />
    <img src="http://searchcdn.infospace.com/Dogpile-8.0.1.353/Content/Img/img_trans.gif?av=1353" />
</div>

<script>
    $(function() {
        $('#reorder').click(function() {
            $("#reorder").randomize("img");
        });
    });

    (function($) {
        var onerandom = Math.random();
        $.fn.randomize = function(childElem) {
            return this.each(function() {
                var $this = $(this);
                var elems = $this.children(childElem);
                elems.sort(function() { return (Math.round(onerandom)-0.5); });  
                $this.remove(childElem);  
                for(var i=0; i < elems.length; i++)
                $this.append(elems[i]);      
            });    
        }
    })(jQuery);
</script>

如何在图像列表中移动元素？用JQuery

4 个答案: