jQuery反向排序(倒序)子对象

最新推荐文章于 2021-06-04 17:57:45 发布

axl234

最新推荐文章于 2021-06-04 17:57:45 发布

阅读量1.3k

点赞数 1

分类专栏： jquery javascript css 文章标签： javascript json ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/84515296

版权

javascript 同时被 3 个专栏收录

158 篇文章 0 订阅

订阅专栏

jquery

104 篇文章 0 订阅

订阅专栏

css

104 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="ini.iteye.com" />
<title>jQuery反向排序(倒序)子对象</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
#layout{width:405px;margin:15px auto;}
ul{list-style: none;float:left;margin:0 15px;}
li{padding:5px 10px;width:100px;color:#fff;}
</style>
</head>
<body>
<div id="layout">
    <ul id="test"></ul>
    <ul>
        <div style="padding:110px 0;">==></div>
    </ul>
    <ul id="test2"></ul>
    <div style="clear:both;padding:20px;text-align:center;">
        <input type="button" id="btn" value="去掉(最后)一个，然后重新排序" />
        <input type="button" id="btn2" value="重置" />
    </div>
</div>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
(function($) {
    $.extend({
        reverseChild : function(obj, child) {
            var childObj = $(obj).find(child);
            var total = childObj.length;

            childObj.each(function(i) {
                $(obj).append(childObj.eq((total-1)-i));
            });

            //console.log(childObj.html());
        }
    });
})(jQuery);

//生成测试对象
function maskList() {
    var color = ["red", "green", "blue", "orange", "#AAC93E", "#27BFC1", "#2790EB", "#D139D1", "#BC5895", "#5FA0D3"];
    var html = '';
    for (var i=0; i<color.length; i++) {
        html += '<li style="background:'+color[i]+'">'+(i+1)+'</li>';
    }

    $("#test").html(html);
    $("#test2").html($("#test").html());
    $.reverseChild("#test2", 'li');
}

$(function() {
    maskList();

    $("#btn").click(function() {
        var total = $("#test li").length;

        if(total > 2) {
            $("#test li").last().remove();
            $("#test2").html($("#test").html());
            $.reverseChild("#test2", 'li');
        } else {
            alert("亲，留两个吧！");
        }
    });

    $("#btn2").click(maskList);
});
</script>
</body>
</html>

axl234

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery反向排序(倒序)子对象

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="author" content="ini.iteye.com" /&gt; &a
复制链接

扫一扫