更改每個div上的背景顏色當被刪除

Question

我有一個divs（div.row）列表，我需要更新背景顏色。目前我通過CSS設置背景顏色與div.row：nth-​​child（odd）和div.row：nth：child（偶數）。

div.row's正在通過點擊刪除 - 然後它成功了，我需要它來更新整個行，所以它仍然有不同的背景每秒..

我該怎麼做？

我的腳本是現在：

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

Answer 1

jQuery的需要噸選擇：

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

這裏有一個巨大的名單：http://api.jquery.com/category/selectors/。

Answer 2

這會不會工作？

$(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(); 
    }); 
}); 

Answer 3

如果我理解正確： 如果您從中間刪除其中一行，則可能必須重新運行循環以重置行的BG顏色。如果刪除的行在底部，則不需要執行任何操作。

重置BG行的操作將在您處理行刪除的單擊事件處理程序中完成。

我還建議使用css類而不是直接樣式。 您可以使用.removeClass（），.addClass（）

希望這會有所幫助。

Answer 4

這裏是..最後:-)發現瞭解決方案

我的，希望能對別人有用發佈 - 非常感謝你的幫助！

$(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" 
     }); 
    }); 
});