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>

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

...全文

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

JQuery 1.5 API chm 中文版不过这个版本索引是不能用了，请见谅。推荐使用html索引版：http://download.csdn.net/source/3205989

本次更新内容较多，已有的组件新增了很多新的API，并且首次加入了移动端开发框架，可谓相当给力，新东西自然意味着更多的BUG即将诞生，我个人预计在未来的1~2个版本里会有不少BUG修复的更新内容，今后EasyUI定会发力移动开发方向，所以也算是一个好的开头，虽然目前东西还不是很全，但是基本的也都够用了，希望EasyUI今后会越来越好吧！由于现在工作过于繁忙所以本次API更新延后了快2周，抱歉了！老规矩，介绍一下本次更新内容吧！官方给的更新内容写的不全，我已经全部补全了。包括更新内容中写到的新增API，但是在API文档中没有给出的，在我的API当中全部都有（比官方网站上的还要全 :P） jQuery EasyUI 1.4.2版本更新内容： Bug（修复） treegrid：修复重建treegrid之后列会恢复原始大小的问题。 Improvement（改进） draggable：添加“delay”属性，允许用户延迟拖动操作； tree：添加“filter”属性和“doFilter”方法； tabs：“add”方法允许用户在指定的索引位上插入选项卡面板； tabs：用户可以决定哪些选项卡面板可以被选择； tabs：添加“justified”，“narrow”和“pill”属性； layout：添加“unsplit”和“split”方法； messager：支持键盘导航功能； form：添加“onChange”事件； combobox：添加“queryParams”属性； slider：添加“range”属性； menu：添加“itemHeight”，“inline”，“noline”和“align”属性； panel：添加“header”属性，允许用户自定义面板标题栏； menubutton：添加“hasDownArrow”属性。 New Plugin（新组件） datalist：该组件是展示列表数据的组件，用户可以对列表数据进行分组、单选、多选等各种操作； navpanel：该组件是移动端框架的根组件； mobile：filebox 该组件提供了移动页面堆栈管理和导航。