如何添加類使用jquery

Question

我用下面的jQuery代碼爲我舉表

$(document).ready(function() { 
    $('.table>tr>td').addClass('redBg'); 
    console.log('hg');  
}); 

到TD中舉表標籤，以及我想這一個

$(document).ready(function() { 
    $('.table>tbody>tr>td').addClass('redBg'); 
    console.log('hg'); 

}); 

但類不會加入到td標籤，

這裏是工作提琴https://jsfiddle.net/udarazz/0vx7tjfq/

任何人都可以幫助我解決這個問題嗎？

Answer 1

如果你忽略它，許多瀏覽器將隱式添加一個容器來包裝所有錶行。您可以使用瀏覽器的開發人員工具/檢查器對其進行驗證。所得的結構：

<table> 
    <tbody> 
     <tr> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

這意味着<tr>不再是<table>直接孩子，你table > tr選擇將不再工作。

要解決它，你可以：

• 明確包括<tbody>在您的標記和使用table > tbody > tr > td選擇。 table tr > td

工作JSFiddle：

不要使用直接子選擇器。

自舉風格偶數行和徘徊的背景，你可能需要讓你的類定義不是引導的內置樣式更加具體：

table.table tr > td.redBg { 
    background-color: red; 
} 

或者，您可以添加!important你的CSS覆蓋：

.redBg { 
    background-color: red !important; 
} 

Answer 2

修訂JQUERY

$(document).ready(function() { 
    $('.table tr > td').addClass('redBg'); 
    console.log('hg'); 
}); 

Answer 3

如果其在<table>第一<td>你想添加類的使用方法：

$(document).ready(function() { 
    $('.table tr td:first-child').addClass('redBg'); 
    console.log('hg'); 
}); 

https://jsfiddle.net/0vx7tjfq/5/