下面是几张图片用jquery如何实现点击up按钮和down按钮排序啊
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动多项选择列表框</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$("#insertcontentimg > li").each(function(i){ //使用jquery的each循环每一个li,为其添加click方法
$(this).click(function(){ //alert($(this).is(".selected"));
if($(this).is(".selected"))
{
$('#insertcontentimg > li.selected').removeClass('selected'); //先将原来具有in这个类的li元素的in移除
$(this).addClass('selected');
}
else{
$(this).toggleClass("selected");
}
});
});/*$("#insertcontentimg > li").each(function() {
$(this).click(function() {
$(this).toggleClass('selected', $(this).hasClass('') );
}, function() {
$(this).removeClass('selected');
});
});
*/});
function toUp()
{
var index = $('#insertcontentimg > li').index($('#insertcontentimg >li:class:last'));
alert(index);return;
var len = $('#insertcontentimg > li').length-1;
var $recent = $('#insertcontentimg > li:eq('+(index+1)+')');
if(index<len ){
var $options = $('#insertcontentimg > li:class').remove();
setTimeout(function(){$recent.after( $options )},10);
} }</script>
<body><ul id="insertcontentimg" style="list-style:none;">
<li class="" id="rmimg_1" style="border:1px solid red;width:100px;"><img src="1.jpg" width="100" height="75" title="1" /><li>
<li class="" id="rmimg_2" style="border:1px solid red;width:100px;"><img src="2.jpg" width="100" height="75" title="2"/><li>
<li class="" id="rmimg_3" style="border:1px solid red;width:100px;" ><img src="3.jpg" width="100" height="75" title="3"/><li>
<li class="" id="rmimg_4" style="border:1px solid red;width:100px;"><img src="4.jpg" width="100" height="75" title="4"/><li>
<li class="" id="rmimg_5" style="border:1px solid red;width:100px;" ><img src="5.jpg" width="100" height="75" title="5"/><li>
</ul>
<input class="button" type="button" value="Up" />
<input class="button" type="button" value="Down" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动多项选择列表框</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$("#insertcontentimg > li").each(function(i){ //使用jquery的each循环每一个li,为其添加click方法
$(this).click(function(){ //alert($(this).is(".selected"));
if($(this).is(".selected"))
{
$('#insertcontentimg > li.selected').removeClass('selected'); //先将原来具有in这个类的li元素的in移除
$(this).addClass('selected');
}
else{
$(this).toggleClass("selected");
}
});
});/*$("#insertcontentimg > li").each(function() {
$(this).click(function() {
$(this).toggleClass('selected', $(this).hasClass('') );
}, function() {
$(this).removeClass('selected');
});
});
*/});
function toUp()
{
var index = $('#insertcontentimg > li').index($('#insertcontentimg >li:class:last'));
alert(index);return;
var len = $('#insertcontentimg > li').length-1;
var $recent = $('#insertcontentimg > li:eq('+(index+1)+')');
if(index<len ){
var $options = $('#insertcontentimg > li:class').remove();
setTimeout(function(){$recent.after( $options )},10);
} }</script>
<body><ul id="insertcontentimg" style="list-style:none;">
<li class="" id="rmimg_1" style="border:1px solid red;width:100px;"><img src="1.jpg" width="100" height="75" title="1" /><li>
<li class="" id="rmimg_2" style="border:1px solid red;width:100px;"><img src="2.jpg" width="100" height="75" title="2"/><li>
<li class="" id="rmimg_3" style="border:1px solid red;width:100px;" ><img src="3.jpg" width="100" height="75" title="3"/><li>
<li class="" id="rmimg_4" style="border:1px solid red;width:100px;"><img src="4.jpg" width="100" height="75" title="4"/><li>
<li class="" id="rmimg_5" style="border:1px solid red;width:100px;" ><img src="5.jpg" width="100" height="75" title="5"/><li>
</ul>
<input class="button" type="button" value="Up" />
<input class="button" type="button" value="Down" />
</body>
</html>
push 成数组用 resort() 就可以了
{var index = $('#insertcontentimg li').index($('#insertcontentimg li.selected:first'));
var $recent = $('#insertcontentimg li:eq('+(index-1)+')');
if(index>0){
var $options = $('#insertcontentimg li.selected').remove();
setTimeout(function(){
$recent.before($options);
},10);
}
}function toDown()
{
var index = $('#insertcontentimg li').index($('#insertcontentimg li.selected:last'));
var len = $('#insertcontentimg li').length-1;
var $recent = $('#insertcontentimg li:eq('+(index+1)+')');
if(index<len ){
var $options = $('#insertcontentimg li.selected').remove();
setTimeout(function(){
$recent.after( $options );
},10);
}
}
给我满分!