jquery在循环中向上/向下移动
jquery moving up/down in loop
我正在尝试向上/向下移动div中的元素。一旦它被移动,item.position就必须与前一个互换。下面是代码。有人能建议如何将新分配的位置和相关数据序列传递到阵列中,以便将其传递到控制器并插入数据库吗
<c:forEach var="item" items="${entry.value }" >
<ul>
<li> <div class="rows">
<a id='${item.position}' data-seq='${attr.id}' class="noDownloadFormat" href="/files/${item.value}" target="_blank"><c:out value="${item.title}" /></a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP" />
</div>
</div>
</li>
<ul>
</c:forEach>
Jquery:
$(document).ready(function () {
$(".btn1").click(function(){
var $current = $(this).closest('li')
var currentval =$(this).closest('li').children().find("a").prop("id");
var prevVal=$current.prev('li').children().find("a").prop("id");
var $previous = $current.prev('li');
if($previous.length !== 0){
$current.insertBefore($previous);
$(this).closest('li').children().find("a").prop("id",prevVal);
$current.prev('li').children().find("a").prop("id")==currentval ;
}
return false;
});
});
感谢
我修改了jquery,现在我可以上下移动,但不能交换的位置
我刚刚完成了向上按钮。。。在线调整。
<html>
<body>
<ul>
<li>
<div class="rows">
<a id='position1' data-seq='id1' class="noDownloadFormat" href="#" target="_blank">title1</a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP 1">
</div>
</div>
</li>
<li>
<div class="rows">
<a id='position2' data-seq='id2' class="noDownloadFormat" href="#" target="_blank">title2</a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP 2">
</div>
</div>
</li>
<li>
<div class="rows">
<a id='position3' data-seq='id3' class="noDownloadFormat" href="#" target="_blank">title3</a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP 3">
</div>
</div>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var handler = function (e) {
$li = $(e.target).parent().parent().parent();
// Avoid delete element if it's at top of list.
if ($li.prev().size() !== 0) {
// Move element.
$li.prev().before($li.remove());
// Bind click handler to new button.
$('.btn', $($li)).click(handler);
}
};
$('.btn').on('click', handler);
</script>
</body>
</html>
相关文章:
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 停止jQuery UI滑块移动超过给定值
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- JQuery移动动态分区页面
- jquery移动对齐按钮取决于内容大小
- 如何在jquery中找到鼠标滚轮/触摸移动事件的走向
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 将闪烁的图像从左向右移动 jquery
- 鼠标移动 jquery 上的多个转换
- 使用POST从PhoneGap,移动jQuery应用程序跨域脚本检测成功的html表单提交
- 移动.jQuery中的changepage不工作(白屏)
- 创建移动jQuery切换菜单
- 元素拒绝移动- jQuery .css
- 力“Tab"在元素内移动- Jquery/Javascript
- 实时图像大小调整和移动(JQuery)
- .click()和.trigger("click")都不能用于移动jquery图标按钮.我怎样才能解
- 如何重置移动JQuery表单
- 用鼠标移动jQuery自定义工具提示
- 移动 jquery onclick 不播放音频文件
- 移动jquery页面是不断加载,如果我把自定义参数在URL