jQuery 将类应用于 <tr>答案

【问题标题】：jQuery apply class to <tr>jQuery 将类应用于 <tr>
【发布时间】：2014-10-29 12:15:12
【问题描述】：

我目前的HTML结构

<div class="pull-right" id="sandbox-container">
<div class="datepicker datepicker-inline">
<div class="datepicker-days">
<table class=" table-condensed"><thead>
<tr><th class="prev" style="visibility: visible;">«</th>
<th class="datepicker-switch" colspan="5">October 2014</th>
<th class="next" style="visibility: visible;">»</th></tr>
<tr>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
<th class="dow">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old day">29</td>
<td class="old day">30</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="disabled day">4</td>
<td class="disabled day">5</td>
</tr>
<tr>
<td class="day">6</td>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="disabled day">11</td>
<td class="disabled day">12</td>
</tr>
<tr>
<td class="day">13</td>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="disabled day">18</td>
<td class="disabled day">19</td>
</tr>
<tr><td class="day">20</td>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="disabled day">25</td>
<td class="disabled day">26</td>
</tr>
<tr>
<td class="day">27</td>
<td class="day">28</td>
<td class="today day">29</td>
<td class="day">30</td>
<td class="day">31</td>
<td class="new disabled day">1</td>
<td class="new disabled day">2</td>
</tr>
<tr>
<td class="new day">3</td>
<td class="new day">4</td>
<td class="new day">5</td>
<td class="new day">6</td>
<td class="new day">7</td>
<td class="new disabled day">8</td>
<td class="new disabled day">9</td></tr>
</tbody>
<tfoot>
<tr>
<th class="today" colspan="7" style="display: none;">Today</th>
</tr>
<tr>
<th class="clear" colspan="7" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>  
</div>  
</div>

在上面生成的HTML中，有一个<td>，类today day是

<tr>
    <td class="day">27</td>
    <td class="day">28</td>
    <td class="today day">29</td>
    <td class="day">30</td>
    <td class="day">31</td>
    <td class="new disabled day">1</td>
    <td class="new disabled day">2</td>
</tr>

如何将 CSS 类应用到它的 <tr>，所以结果是

<tr class="mycustomClass">
    <td class="day">27</td>
    <td class="day">28</td>
    <td class="today day">29</td>
    <td class="day">30</td>
    <td class="day">31</td>
    <td class="new disabled day">1</td>
    <td class="new disabled day">2</td>
</tr>

today day 类将只应用于一个<td>。

谢谢。

【问题讨论】：

标签： jquery html css bootstrap-datepicker

【解决方案1】：

您可以找到td 和today 和day 类，然后找到它的父元素tr 并将mycustomclass 类添加到它。

$('td.today.day').parent().addClass('mycustomClass')

【讨论】：

【解决方案2】：

试试这个：找到具有 class="today day" 的 td 并让它的父级添加 mycustomClass

$(function(){
  $('td.today.day').parent().addClass('mycustomClass');
});

【讨论】：

为什么类是td.today.day 而不是td.today day？
td.today.day 会发现td 有两个classes 和td.today day 这将尝试找到td 和class today 然后它会找到那个td 的孩子day 类，我的意思是这将找到 td 和 class="day" 的孩子。这里空格表示找到父项（左侧）的子项（右侧）。
它是查找后代（不是父子）的选择器，更多信息请参见Decendant selector

【解决方案3】：

$(".today.day").closest("tr").addClass("mycustomClass");

【讨论】：

【解决方案4】：

找到具有“today”和“day”类的 TD 的父 TR 元素，并使用 addClass() 向其添加类。

你可以试试下面的，

$('td.today.day').parent('tr').addClass('YourClass')

【讨论】：

包括一些关于您发布的代码如何解决问题的说明。