jQuery 更改 tr CSS 直到 tr 类不同

Question

我正在尝试做某种“树”表。

tr之间的关系是这样的:

+----------+     +----------+     +----------+
| charges  | 1:n | services | 1:n | products | 
+----------+     +----------+     +----------+

所以对于每条收费记录都有 N 项服务，每项服务都由产品组成。

即早餐收费是收取一份一般的早餐(对应你的饮食习惯)，这份早餐是橙汁加一片面包。

我试图让第一行具有特殊颜色，当用户单击向下箭头图标时，它会显示(在示例中，只是出于可视化目的更改颜色)对应于服务，等等。

当我点击红色圆圈中的箭头(收费 id 10)时，它显示(红色... ¬¬)所有“ child ”服务，收费...但它也显示(颜色红色... ¬¬) 费用 n° 12 的服务.... 我需要知道的是当循环每个遇到费用为 12 的行时如何停止着色(显示)。所以行在黑色圆圈不会变成红色背景。

为此，费用、服务和产品的行具有不同的类，因此 jQuery 可以找到它们:

 $(".listar-servicios").click(function(event){
   event.preventDefault();
   var flag = 1;
   $(this).parent().parent().css("color","green").siblings('.fila-servicio').each(function(){    
     if(!$(this).hasClass('.fila-servicio') && flag !== 1 && $(this).hasClass('.fila-consumo')){
        $(this).css('background-color', 'green');
        flag = 0;
     }else{
        $(this).css('background-color', 'red');     
        flag = 0;
     }
  });
});

你可以在这里看到一个工作示例和我的代码:JSBIN

很抱歉问了这么长的问题。

Answer 1

解决办法

        $(".listar-servicios").click(function(event){
           event.preventDefault();
           $(this).parent().parent().css("color","green").siblings('.fila-servicio,.fila-consumo').each(function(){
              if($(this).hasClass('fila-servicio')){
                  $(this).css('background-color', 'red');   
              }else if($(this).hasClass('fila-consumo')){
                return false;
              }          
          });
       });

您的代码中几乎没有问题

• 当您通过 hasClass 方法检查特定类时，您不必使用点 (.)，因为它是 Jquery 选择器。
• 在 sibling 中，您需要选择类为“fila-consumo”的 sibling ，然后您才能在每个循环中找到该元素。

我已经删除了我认为它没有用的标志，要打破你需要使用 return false 的循环。

---

更新-

您可以使用另一种方法 'nextAll' 而不是 sibling 来完美地工作。当我测试此代码时，我发现当您单击箭头按钮时它不适用于 charge id 12。因为第一个兄弟本身是具有 fila-consumo 类的当前行。所以我将 nextAll 与具有所需类的选择器“tr”一起使用。下面的代码完美运行。

  $(".listar-servicios").click(function(event){
      event.preventDefault();
      $(this).parent().parent().css("color","green").nextAll('tr.fila-servicio,.fila-consumo').each(function(){
        if($(this).hasClass('fila-servicio')){
            $(this).css('background-color', 'red');   
        }else if($(this).hasClass('fila-consumo')){
            return false;
        }

      });
    });