Jquery实现Div上下移动示例
2019/6/29 22:37:59
本文主要是介绍Jquery实现Div上下移动示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
复制代码 代码如下:
$(this).ready(function() {
$(".up").each(function() {
$(this).click(function() {
var $tr = $(this).parents("li");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
});
var trLength = $(".down").length;
$(".down").each(function() {
$(this).click(function() {
var $tr = $(this).parents("li");
if ($tr.index() != trLength) {
$tr.next().after($tr);
}
});
});
$("a[name='up']").click(function() {
if ($("input[name='rule']:checked").size() > 1) {
alert("只能选择一项进行上下移操作!");
return;
}
$("input[name='rule']:checked").each(function() {
var $div = $('#rule_' + $(this).val());
if ($div.index() != 0) {
$div.prev().before($div);
}
});
});
$("a[name='down']").click(function() {
if ($("input[name='rule']:checked").size() > 1) {
alert("只能选择一项进行上下移操作!");
return;
}
$("input[name='rule']:checked").each(function() {
var $div = $('#rule_' + $(this).val());
if ($('#rule_' + (parseInt($(this).val()) + 1)).html() != null) {
$div.next().after($div);
}
});
});
});
这篇关于Jquery实现Div上下移动示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习