Jquery 从列表中删除项目后，对行类重新排序
我想从用户列表中删除一个条目，并且应该重新排列行类，以便没有两个连续的行具有相同的类。从列表中删除项目后，如何对行类重新排序？例如：如果我删除项目'five'，元素'four'和'six'具有相同的行类Jquery 从列表中删除项目后，对行类重新排序,jquery,Jquery,我想从用户列表中删除一个条目，并且应该重新排列行类，以便没有两个连续的行具有相同的类。从列表中删除项目后，如何对行类重新排序？例如：如果我删除项目'five'，元素'four'和'six'具有相同的行类 <!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="content-type" content="text/html;charse
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js" charset="utf-8"></script>
<style type="text/css">
ul#users { list-style:none; margin:0 auto; width:50%; }
ul#users li { padding:3px; cursor:pointer; }
ul#users li a.delete { float:right; }
ul#users li.col0 { background:#ffffff; }
ul#users li.col1 { background:#fbfbfb; }
ul#users li.col2 { background:#fdffce; }
</style>
<script type="text/javascript">
$(document).ready(function(){
// hover class
var clshover = "col2";
// confirm message
var msgconfirm = "You really want to delete this entry?";
// Hover effect
$('ul#users > [class^=col]').hover(
function () {
$(this).addClass(clshover);
},
function () {
$(this).removeClass(clshover);
}
);
// Delete a defined entry
$('ul#users > li > a.delete').click(function (){
if (confirm(msgconfirm)) {
$(this).parents('li').remove();
}
});
});
</script>
</head>
<body>
<ul id="users">
<li id="users0" class="col0">one<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users1" class="col1">two<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users2" class="col0">three<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users3" class="col1">four<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users4" class="col0">five<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users5" class="col1">six<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users6" class="col0">seven<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users7" class="col1">eight<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users8" class="col0">nine<a href="javascript:;" class="delete" title="Delete"> x </a></li>
<li id="users9" class="col1">ten<a href="javascript:;" class="delete" title="Delete"> x </a></li>
</ul>
</body>
</html>
尝试将您的JS更改为以下内容：
<script type="text/javascript">
$(document).ready(function(){
function reassign()
{
var i =0;
$.each($('ul#users > li'), function() {
$(this).attr('class', 'col' + (i % 2));
i++;
});
}
// hover class
var clshover = "col2";
// confirm message
var msgconfirm = "You really want to delete this entry?";
// Hover effect
$('ul#users > [class^=col]').hover(
function () {
$(this).addClass(clshover);
},
function () {
$(this).removeClass(clshover);
}
);
// Delete a defined entry
$('ul#users > li > a.delete').click(function (){
if (confirm(msgconfirm)) {
$(this).parents('li').remove();
reassign();
}
});
});
</script>