2013-04-20 122 views
1

我想將一個類應用到元素的父母和它的兄弟姐妹。到目前爲止,我只通過應用兩行jQuery,使得最終結果在兩個階段中的應用非常難看,才取得了成功。jQuery addClass父和它的兄弟姐妹

<style type="text/css"> 
td.rostered { 
    opacity: 0.3; 
} 
</style> 

<table> 
<tr class="flight_search"> 
    <td class="" style="width: 6%; text-align: left"><img id="525" class="roster" src="images/link_image.png" alt="Link Image"></td> 
    <td class="" style="width: 7%">Option 1</td> 
    <td class="" style="width: 24%">London -<strong>Paris</strong></td> 
    <td class="" style="width: 25%">Dep: <strong>0355</strong> Arr: 0615 (02:20)</td> 
    <td class="" style="width: 30%">Boeing 767</td> 
    <td class="" style="width: 8%"><a class="rego" href="#">ABCDE</a></td> 
</tr> 
</table> 

當用戶點擊圖像(ID =「525」)的一些AJAX運行來指派飛行到用戶的名冊。然後它返回id並運行一些jQuery來灰化該表的那一行,表明它已經被列出。

function set_rostered(id) { 
//This line adds the class 'rostered' the siblins of the <td> 
$("#" + id).parent().siblings().addClass('rostered'); 
//This line removes the id so the flight cannot be rostered again and adds the class to the parent <td> itself. 
$("#" + id).attr('id', '').parent().addClass('rostered'); 
} 

有沒有一種方法,我可以結合這兩行代碼,使類適用於所有元素(父和它的兄弟姐妹)在同一時間?

+0

那麼,你可以重構你的CSS來定位'tr.rostered td'而不是'td.rostered'。這會消除你的第一條線。 – FrankieTheKneeMan 2013-04-20 00:08:53

+0

使用jQuery版本 – 2013-04-20 00:11:03

+0

jQuery版本是1.9.1。 – Barbs 2013-04-20 00:38:54

回答

1

嘗試增加回(與加回()函數)。

$("#" + id).parent().siblings().addBack().addClass('rostered'); 
+0

這與兩行版本相同(我喜歡,現在是一行而不是兩行)。但效果仍然適用於兩個階段,首先細胞中的文字突出顯示,然後在大約半秒後顯示。 – Barbs 2013-04-20 00:41:55

+0

@Barbs「Highlight」?也許你可以做一個小提琴來表明這兩個舞臺效果是什麼,確切地說...... – FrankieTheKneeMan 2013-04-20 17:39:54

0

$( 「#」 + ID).attr( '身份證', '').parent()父() 。兒童()addClass( '名冊');