节点的上移与下移

最新推荐文章于 2024-10-25 15:29:17 发布

xyphf_和派孔明

最新推荐文章于 2024-10-25 15:29:17 发布

阅读量928

点赞数

分类专栏： DOM&BOM操作

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/52727850

版权

DOM&BOM操作专栏收录该内容

64 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){  
    $('input[value="上移"]').click(function(){       
        var $nowLi = $(this).closest('li'); //当前
        var $prevLi = $nowLi.prev();      //上一个
        if( $prevLi.length == 0 ){
            alert('到头了');
        }
        else{
            $nowLi.insertBefore( $prevLi );
        }       
    });

    $('input[value="下移"]').click(function(){   
        var $nowLi = $(this).closest('li');
        var $nextLi = $nowLi.next();  
        if( $nextLi.length == 0 ){
            alert('到尾了');
        }
        else{
            $nowLi.insertAfter( $nextLi );
        }       
    }); 
});
</script>
</head>

<body>
<ul>
    <li>1.<input type="button" value="上移" /><input type="button" value="下移" /></li>
    <li>2.<input type="button" value="上移" /><input type="button" value="下移" /></li>
    <li>3.<input type="button" value="上移" /><input type="button" value="下移" /></li>
    <li>4.<input type="button" value="上移" /><input type="button" value="下移" /></li>
    <li>5.<input type="button" value="上移" /><input type="button" value="下移" /></li>
</ul>
</body>
</html>