Question

I’m trying to do some kind of “tree” table.

The relations between the tr are these:

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

So for every charge record there’s N services, and every service is made of products.

i.e. the charge for breakfast charges a general breakfast (which correspond to your diet), and this breakfast is made of orange juice and a slice of bread.

I was trying to get the first row to be of a special color, and when the user clicks the down arrow icon, it would display (in the example, just changes the colors for visualization purposes) the rows that correspond to the services, and so on for the products rows.

When I click on the arrow in the red circle (charge id 10), it shows (color in red… ¬¬) all the “children” services for that, charge… but it also shows (color in red… ¬¬) the services for the charge n° 12…. all I need to know is how to stop the coloring (displaying) when the loop each encounters the row with the charge 12. so the rows in the black circle don’t change to red background.

To do that, the rows for charges, services and products have different class, so jQuery could find them:

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

you can see a working example and my code here: JSBIN

Sorry for the long question.

Answer 1

Here is the solution

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

There were few problems in your code

• When you check particular class by hasClass method then you dont have to use dot(.) because it is Jquery selector.
• In the siblings you need to select sibling with class ‘fila-consumo’ then only you will find that element inside each loop.

I have removed the flag which I dont think its useful, for breaking the loop you need to use return false.

---

Update –

You can use another method ‘nextAll’ instead siblings to work it perfectly.
When I tested this code I found its not working for charge id 12 when you click on arrow button. Because first sibling itself is current row which has class fila-consumo.
So I used nextAll with the selector ‘tr’ having required classes. Below code works perfectly.

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

      });
    });