Question

I am trying to apply css rules to tr elements depending on what class would be the following tr.

ex.

<table>
<tr class="x"/>
<tr class="y"/>
<tr class="x"/>
<tr class="x"/>
</table>

So those tr with class x that have a following tr with class y will have different css style than those tr that the next tr is with class x.

<script type="text/javascript">
 $(document).ready(function () {
  if ($("tr.x").next('(tr.y)')) {

        $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

      }
  else{

       $(this).css({'background-color' : 'blue', 'font-weight' : 'normal'});

      }
});
</script>

It is not working at all and I don’t know why.

Any help would be appreciated.

Thanks in advance.

Update

I wanted to apply the css style to the first td of the tr, and I am trying;

$(this).first('td').css({ 'color': 'Blue',});

But still apply it to the row.

Thanks again to all.

Answer 1

My updated answer is inspired by Sarfraz’s original answer, but he went a different way in the end, so posting here instead:

$('tr.x:has(+ tr.y)').css({ ... });

That uses a sibling combinator with a :has test. (I’m not sure whether :has is a Sizzle-specific thing [Sizzle being the selector engine used by jQuery and others] or of there’s a proposal out there; it’s not specified by CSS3, and so not standard…yet?)

Live example: http://jsbin.com/imeso4/3

Update If you want to apply styling to the first child cell of that row, you’re looking for the :first-child selector:

$('tr.x:has(+ tr.y) td:first-child').css({ ... });

Live example: http://jsbin.com/imeso4/8

Or if you want to do something with the rows, and then also do something with the cells, break it up:

var rows = $('tr.x:has(+ tr.y)');
rows.css({color: 'blue'});
rows.find('td:first-child').css({color: 'red'});

Live example: http://jsbin.com/imeso4/7

---

Original (plodding) answer:

$(document).ready(function() {

    $('tr.x').each(function() {
        var $this = $(this);
        var next = $this.next('tr');
        if (next.length > 0 && next.hasClass('y')) {
            // This tr is class x followed by class y
        }
    });

});

Live example: http://jsbin.com/imeso4