移除 on 时更改每个 div 的背景颜色答案

【问题标题】：Changing the background-color on EVERY div when on is removed移除 on 时更改每个 div 的背景颜色
【发布时间】：2011-07-16 23:16:14
【问题描述】：

我有一个 div 列表 (div.row)，我需要更新背景颜色。目前我通过 CSS 设置背景颜色 div.row:nth-child(odd) 和 div.row:nth:child(even) ..

正在通过单击删除 div.row - 然后它成功了，我需要它来更新整个行，因此它每秒仍然具有不同的背景..

我该怎么做？

我的脚本现在是：

<script type="text/javascript">
$(document).ready( function() {
    $("a.delete").click(function(){
        $.ajax({
            type: "POST",
            url: "...",
            data: { this_page_id: $(this).prev().val() },
            success: function(){
                $(".success-delete").css("display","block");
            },
            async: false,
            dataType: "html"
        });
        $("#r" + $(this).prev().val()).slideUp();

        var i = 1
        $("div.row").each( function(index){
            if( i % 2 ){
                $(this).css('background-color','#ffffff');
            } else {
                $(this).css('background-color','#ececec');
            }

            i++;
        });
    });
});
</script>

【问题讨论】：

标签： jquery css jquery-post

【解决方案1】：

这是解决方案..终于找到了:-)

我发帖希望它对其他人有用 - 非常感谢您的帮助！

$(document).ready( function() {
    $("a.delete").click(function(){
        var id = $(this).prev().val();
        $.ajax({
            type: "POST",
            url: "/nsautolak.dk/admix/pages/delete/",
            data: { this_page_id: $(this).prev().val() },
            success: function(){
                $(".success-delete").css("display","block");
                $("#r" + id).removeClass("block").slideUp();

                $("div.block:odd").css('background-color','#ececec');
                $("div.block:even").css('background-color','#ffffff');
            },
            async: false,
            dataType: "html"
        });
    });
});

【讨论】：

【解决方案2】：

如果我理解正确：如果从中间删除其中一行，则可能必须重新运行循环以重置行的 BG 颜色。如果要删除的行在底部，则无需执行任何操作。

此行 BG 的重置将在您处理行删除的单击事件处理程序中完成。

我还建议使用 css 类而不是直接样式。您可以使用 .removeClass()、.addClass()

希望这会有所帮助。

【讨论】：

【解决方案3】：

jQuery 采用大量选择器：

$('div.row:even').css('background-color', 'white');
$('div.row:odd').css('background-color', '#ececec');

这是一个巨大的列表：http://api.jquery.com/category/selectors/。

【讨论】：

【解决方案4】：

这样不行吗？

$(document).ready( function() {
    $("a.delete").click(function(){
        $.ajax({
            type: "POST",
            url: "...",
            data: { this_page_id: $(this).prev().val() },
            success: function(){
                $(".success-delete").css("display","block");
                doRows();
            },
            dataType: "html"
        });
        $("#r" + $(this).prev().val()).slideUp();

        function doRows() {
            $("div.row").each( function(index){
                if( index % 2 ){
                    $(this).css('background-color','#ffffff');
                } else {
                    $(this).css('background-color','#ececec');
                };
            });
        };

        doRows();
    });
});

【讨论】：

对不起，只提供了一半的例子。