View Code 
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
function exchangePosition()
{
//alert($("#list>li").size());
//alert($("#list>li").length);
//alert($("#li1").insertAfter($("#li2")));
alert($("#li3").insertBefore($("#li2")))
//alert($("#li1").before().html());
alert($("#li3").index());
var len = $("#ul>li").length;
$("#list").children("li").eq(0).css("background-color","red");
$("#list").children("li").eq(len-1).css("background-color","green");
}
window.onload = function(){
exchangePosition();
}
</script>
</head>
<body>
<ul id="list">
<li id="li1">11</li>
<li id="li2">22</li>
<li id="li3">33</li>
</ul>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
function exchangePosition()
{
//alert($("#list>li").size());
//alert($("#list>li").length);
//alert($("#li1").insertAfter($("#li2")));
alert($("#li3").insertBefore($("#li2")))
//alert($("#li1").before().html());
alert($("#li3").index());
var len = $("#ul>li").length;
$("#list").children("li").eq(0).css("background-color","red");
$("#list").children("li").eq(len-1).css("background-color","green");
}
window.onload = function(){
exchangePosition();
}
</script>
</head>
<body>
<ul id="list">
<li id="li1">11</li>
<li id="li2">22</li>
<li id="li3">33</li>
</ul>
</body>
</html>