jquery if语句检测是否存在具有“X”类的tr

Question

我正在尝试将css规则应用于tr元素，具体取决于哪些类将是以下tr。

ex。

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

因此，与类X具有与Y类跟随TR将具有比TR，未来TR是X类不同的CSS样式的TR。

<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> 

它根本不工作，我不知道为什么。

任何帮助，将不胜感激。

在此先感谢。

更新

我想的CSS样式应用到TR的第一个TD，我试图;

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

但仍然适用于行。

再次感谢所有。

Answer 1

我更新的答案被Sarfraz's original answer启发，但他在去年底以不同的方式，所以在这里发帖来代替：

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

一个使用sibling combinator有:has测试。 （我不确定是否:has是一个Sizzle特定的事情[Sizzle是jQuery和其他人使用的选择器引擎）还是有一个提案;它不是由CSS3指定的，所以不是标准的......但是？）

活生生的例子：http://jsbin.com/imeso4/3

更新如果你想将样式应用到第一子细胞该行的，你要寻找的:first-child选择：

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

直播例如：http://jsbin.com/imeso4/8

或者如果你想对行做些什么，然后做一些事情与细胞纳克，打破它：

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

活生生的例子：http://jsbin.com/imeso4/7

---

原件（单调乏味）答案：

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

}); 

活生生的例子：http://jsbin.com/imeso4

Answer 2

试试这个：

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

Working Demo

Answer 3

你应该拆分这分成两个：jQuery和CSS。使用CSS来设置所有的.x元素，并使用jQuery来进行特殊的格式设置。

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

演示：http://jsbin.com/enova4

编辑：其实，你应该只添加一个类你的 “特殊” .X元素，并在CSS中执行所有的造型。我还调整了代码以解决第一个孩子td。

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

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