jquery if statement detecting if there are tr with "X" class below

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

Try this:

$('.x + .y').prev().css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

Working Demo

Answer 2

You should split this into two: jQuery and CSS. Use CSS to style all the .x elements, and use jQuery to do your special formatting.

$(".y").prev(".x").children("td").first().css({'background-color':'yellow', 'font-weight':'bolder'});

Demo: http://jsbin.com/enova4

Edit: Actually, you should just add a class to your "special" .x elements, and perform ALL styling in CSS. I also adjusted the code to address the first child td.

$(".y").prev(".x").children("td").first().addClass('x-special');

...
<style>
.x-special {
  background-color: yellow;
  font-weight: bolder;
}
</style>