javascript - 当我的页面有 4 个以上的网格时，如何在页面中设置 4 个网格的样式？

Question

我的页面有 6 个网格，分别称为 grid1、grid2、grid3、grid4、grid5、grid6。当我单击搜索按钮时，我读取了网格中的数据。现在我想为 grid1、grid2、grid4、grid5 设置样式"color:red"，我可以使用这些代码设置它们的样式:

   #grid1.k-grid-content td {
   color:red 
   } 
   #grid2.k-grid-content td {
   color:red 
   } 
   #grid4.k-grid-content td {
   color:red 
   } 
   #grid5.k-grid-content td {
   color:red 
   } 

我觉得这种方式真的很复杂和冗余，像这样更改代码并单击搜索按钮，但失败了。但是如果我先搜索数据，然后执行更改代码，它就成功了。如何更改我的代码？我只是不想编写复杂和冗余的代码。它可以与 jquery“live”事件一起使用吗？有人使用“live”来设置网格 td 的样式吗？

   .GridColor {
   color:red 
   } 
     $(function () {
    $("#grid1.k-grid-content  td").addClass("GridColor");
    $("#grid2.k-grid-content  td").addClass("GridColor");
    $("#grid4.k-grid-content  td").addClass("GridColor");
    $("#grid5.k-grid-content  td").addClass("GridColor");
     }

Answer 1

试试这个，

$('Search').on("click",function(){
$("#grid1.k-grid-content  td").addClass("GridColor");
    $("#grid2.k-grid-content  td").addClass("GridColor");
    $("#grid4.k-grid-content  td").addClass("GridColor");
    $("#grid5.k-grid-content  td").addClass("GridColor");
});



 .GridColor {
   color:red !important;
   }