对列表进行排序,但保留CSS标记
Sorting list but retaining the CSS markup
简介
我目前有一个列表(包括ul
和li
(。
它可以使用jQuery:进行排序
$( "#sortable1" ).sortable({
update : function () {
var items = $('#sortable1').sortable('serialize');
alert(items);
}
});
$( "#sortable1" ).disableSelection();
问题
这段代码移动了完整的li
项(包括它的类,从而移动了它的标记(。
问题
有什么方法可以匹配目标的目标类吗?我在这里设置了一个演示:http://tinker.io/65292
所以基本上,当item 1
向下移动一个位置时,item 1
应该变成绿色,item 2
应该变成red
。
此外,当将item 1
向下移动两个位置时,item 1
应为黄色,item 2
应为红色,最后item 3
应为绿色。
这个演示列表只存在四个项目,但实际上这可能是任何数字。
演示代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
.first { background-color: red; }
.middle1 { background-color: green; }
.middle2 { background-color: yellow; }
.last { background-color: blue; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="first"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="middle1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="middle2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="last"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
</body>
</html>
链接:http://tinker.io/65292
使用第n个子css伪类。。。
#sortable li:nth-child(1) { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:nth-child(4) { background-color: blue; }
将css更改为基于索引而非类的目标列表元素,它将自动更新:
#sortable li:first-child { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:last-child { background-color: blue; }
TINKER
正如您正确地注意到的,整个DOM对象被移动,包括它的所有内容和所有属性,以及它的类。
我想到了几种方法:
- 更改您的CSS,使其不需要
<li>
s上的类。可以使用纯CSS使第一个红色、第二个绿色等。您可以以各种方式使用nth-child
、+
或~
选择器。然后移动<li>
s是可以的,当它们落到位时的外观将是正确的 - 使用javascript在每个元素移动后直接删除并重新应用类
相关文章:
- 禁用滚动,但保留滚动条CSS
- 如何在javascript中进行CSS单元计算并保留CSS单元
- 应该很简单:当转到另一个页面时,如何在基本javascript/css/html页面上保留数据
- 使用 javascript 动态更改文本时保留 CSS
- 如何在不使用 CSS 的情况下在动态添加的 javascript DOM 元素中保留空格
- CSS:当 image1 动画不合适时,一组图像会移动,而它们应该保留在原处
- 如何从 css 动画关键帧获取图像以在完成后保留在页面上
- Javascript“对象”不保留css值
- 在悬停时保留和添加新的转换 (CSS/LESS)
- 在保留CSS的同时更改innerHTMl
- 当代码包含保留字时,设置代码的CSS
- 是否可以使用JavaScript转储DOM并保留CSS效果和布局
- 如何保留页面'阻止CSS影响加载html文档的iframe
- SVG到PNG保留CSS使用javascript
- Javascript代码Cookie保留/保留替代Css
- Jquery不保留CSS样式
- 将HTML加载到DIV中,但保留CSS,JS包括
- 对列表进行排序,但保留CSS标记
- 当Flash层放置在元素上时,保留CSS动画
- 用Javascript填充HTML表并保留CSS样式