JQUERY的排序方法

dean112233 2012-01-16 10:13:40

我想做一个可以随便排序的例子
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>

...全文

177 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

tzg157 2012-01-16

打赏
举报

刚有空给你写了个。貌似有人写完了。



<!doctype html>

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

caiqfrog 2012-01-16

打赏
举报

[Quote=引用 13 楼 caiqfrog 的回复:]

JScript code

$(".up").click(function()
{
var li = $(this).parent();
var prev = $(this).prev();
$(this).remove().before(prev);
});
$(".down").click(function()
{
var li = $(this).parent();
……
[/Quote]
写错了，应该是



$(".up").click(function()

{

  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);

});

caiqfrog 2012-01-16

打赏
举报



$(".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);

});

dean112233 2012-01-16

打赏
举报

对哦。。。原来你用本地了。。。

My_ideal2010 2012-01-16

打赏
举报

[Quote=引用 10 楼 dean112233 的回复:]

引用 9 楼 my_ideal 的回复:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
……
[/Quote]

我晕你里面的 jquery 脚本文件引用你不换下。！！！！！！！

dean112233 2012-01-16

打赏
举报

[Quote=引用 9 楼 my_ideal 的回复:]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>排序</title>……
[/Quote]

没效果啊，FF和IE6都没效果。。。

My_ideal2010 2012-01-16

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>

具体的一些异常判断自己处理吧你要的效果是出来了记得给分哈哈