Question

我想从用户列表中删除一个条目，并且应该重新排列行类，这样就不会有两个连续的行具有相同的类。从列表中删除项目后如何重新排序行类？例如：如果我删除项目'five'，则元素'four'和'six'具有相同的行类。

<!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">&nbsp;x&nbsp;</a></li>
    <li id="users1" class="col1">two<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users2" class="col0">three<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users3" class="col1">four<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users4" class="col0">five<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users5" class="col1">six<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users6" class="col0">seven<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users7" class="col1">eight<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users8" class="col0">nine<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
    <li id="users9" class="col1">ten<a href="javascript:;" class="delete" title="Delete">&nbsp;x&nbsp;</a></li>
</ul>

</body>
</html>

Answer 1

尝试将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>

从列表中删除项目后重新排序行类

1 个答案: