我想做一个可以随便排序的例子
1按DOWN 就排到第二行,2就排到第一行
<div>
<ul>
<li>1<br/><a href="#">up</a><a href="#">down</a></li>
<li>2<br/><a href="#">up</a><a href="#">down</a></li>
<li>3<br/><a href="#">up</a><a href="#">down</a></li>
<li>4<br/><a href="#">up</a><a href="#">down</a></li>
</ul>
</div>
1按DOWN 就排到第二行,2就排到第一行
<div>
<ul>
<li>1<br/><a href="#">up</a><a href="#">down</a></li>
<li>2<br/><a href="#">up</a><a href="#">down</a></li>
<li>3<br/><a href="#">up</a><a href="#">down</a></li>
<li>4<br/><a href="#">up</a><a href="#">down</a></li>
</ul>
</div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>排序</title>
<script type="text/javascript" src="../javascript/jquery-core/jquery.min.js">
</script>
<style type="text/css">
a{
padding:0 10px;
}
</style>
</head> <body>
<ul id="demo">
<li>1<a href="javascript:void(0)" class="up">up</a><a href="javascript:void(0)" class="down">down</a></li>
<li>2<a href="javascript:void(0)" class="up">up</a><a href="javascript:void(0)" class="down">down</a></li>
<li>3<a href="javascript:void(0)" class="up">up</a><a href="javascript:void(0)" class="down">down</a></li> <li>4<a href="javascript:void(0)" class="up">up</a><a href="javascript:void(0)" class="down">down</a></li>
</ul>
<script type="text/javascript">
$(".up").click(function()
{
var li = this.parentNode;
var index = $("#demo li").index(li);
if(index != 0)
{
var first = $("#demo li").get(index-1);
$("#demo").get(0).insertBefore(li,first);
}
});
$(".down").click(function()
{
var li = this.parentNode;
var index = $("#demo li").index(li);
if(index != $("#demo li").length - 1)
{
var first = $("#demo li").get(index+2);
$("#demo").get(0).insertBefore(li,first);
}
});
</script>
</body>
</html>具体的一些异常判断自己处理吧 你要的效果是出来了 记得给分哈哈
没效果啊,FF和IE6都没效果
我晕你 里面的 jquery 脚本文件 引用你不换下。!!!!!!!
$(".up").click(function()
{
var li = $(this).parent();
var prev = $(this).prev();
$(this).remove().before(prev);
});
$(".down").click(function()
{
var li = $(this).parent();
var next = $(this).next();
$(this).remove().after(next);
});
{
var li = $(this).parent();
var prev = li.prev();
li.remove().before(prev);
});
$(".down").click(function()
{
var li = $(this).parent();
var next = li.next();
li.remove().after(next);
});
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('li>a').each(function(i) {
$(this).click(function(e){
var p = $(this).parent();
if($(this).text() == 'up'){
if(p.index() != 0)
p.insertBefore(p.prev());
}else{
if(p.index() != 3)
p.insertAfter(p.next());
}
})
});
})
</script>
</head>
<body>
<div>
<ul>
<li>1<br/><a href="#">up</a> <a href="#">down</a></li>
<li>2<br/><a href="#">up</a> <a href="#">down</a></li>
<li>3<br/><a href="#">up</a> <a href="#">down</a></li>
<li>4<br/><a href="#">up</a> <a href="#">down</a></li>
</ul>
</div>
</body>
</html>