jquery如何调整索引位置

qvbfndcwy 2011-10-27 06:29:02

<div class="area">

        <div class="onediv">1<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>

        <div class="onediv">2<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>

        <div class="onediv">3<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>

        <div class="onediv">4<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>

        <div class="onediv">5<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>

</div>

比如：点击“移到首位”，就把它移到首位去。

...全文

157 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

liangws 2011-10-28

打赏
举报



<div class="area">

        <div class="onediv">1<input type="button" class="show" value="0" /><input type="button" class="move" value="移到首位1" /></div>

        <div class="onediv">2<input type="button" class="show" value="1" /><input type="button" class="move" value="移到首位2" /></div>

        <div class="onediv">3<input type="button" class="show" value="2" /><input type="button" class="move" value="移到首位3" /></div>

        <div class="onediv">4<input type="button" class="show" value="3" /><input type="button" class="move" value="移到首位4" /></div>

        <div class="onediv">5<input type="button" class="show" value="4" /><input type="button" class="move" value="移到首位5" /></div>

</div>

一般比较规则的排版，我都会将点击事件绑定在父节点中，减少事件的绑定

$(".area").click(function(e){

		var target = $(e.target),

			$this = $(this);

		if (target.attr("class") === 'move'){

			$this.prepend(target.parent());

			$this.find(".show").val(function(i,v){

				return i;

			})

		}

		

})

光曰不日 2011-10-27

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.move').click(function(){
var $papa=$(this).parent()
$papa.clone(true).prependTo('.area')
$papa.remove()
})

});
</script>
</head>
<body>
<div class="area">
<div class="onediv">1<input type="button" class="show" value="显示当前index" /><input type="button" class="move"

value="移到首位" /></div>
<div class="onediv">2<input type="button" class="show" value="显示当前index" /><input type="button" class="move"

value="移到首位" /></div>
<div class="onediv">3<input type="button" class="show" value="显示当前index" /><input type="button" class="move"

value="移到首位" /></div>
<div class="onediv">4<input type="button" class="show" value="显示当前index" /><input type="button" class="move"

value="移到首位" /></div>
<div class="onediv">5<input type="button" class="show" value="显示当前index" /><input type="button" class="move"

value="移到首位" /></div>
</div>
</body>
</html>