1

I want to delete an entry from a user list and the rows classes should be rearrange, so that no two consecutive rows have the same class. How can I reorder the rows classes after deleting an item from the list? For example: If I delete the item 'five', the elements 'four' and 'six' have the same rows classes.

<!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>
4

1 回答 1

0

尝试将您的 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>
于 2012-10-29T14:55:05.617 回答