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

axl234

浏览: 268785 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery
javascript
css

<!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>

分享到：

JS对象复制 | js object写法参数传递jquery对象

2013-12-26 10:53
浏览 2335
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论