jQuery第一个孩子第n个孩子

Question

我有下面的当前代码来突出显示顶行和日期以及鼠标所在的 html 表格的单元格。我对 jQuery 还是很陌生，对第一个孩子/第 n 个孩子还没有很好的掌握。而不是突出显示项目＃我想突出显示产品名称（列中的第二个）。我知道我必须为 first-child nth-child 编辑 addClass 和 removeClass 行，但我不确定如何突出显示当前突出显示的单元格下方的单元格。提前感谢您的帮助！

$("td").hover(function(){

  $(this).addClass('highlight').siblings().first().addClass('highlight');

  $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');


},function(){

  $(this).removeClass("highlight").siblings().first().removeClass('highlight');

  $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');

});

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 90%;
        
}

th, td {
    
    padding:8px;
    
}

td {
    
    text-align: center;
    
}

table {
    
    margin:0 auto;
    
}

td:click {
    
    background-color: blue;
}

.highlight {
    
    background-color:#E0E0E0;
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><th>Item #</th><th>1234567</th><th>7654321</th></tr><tr><th>Product</th><th><u>22oz Dark</u></th><th><u>12ct 4oz Dark</u></th></tr><tr><th>2016-01-01</th><td>9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td>8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td>13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td>14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td>13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td>16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td>15421</td><td>3100</td></tr></table>

Answer 1

我想突出显示产品名称（列中倒数第二个）

我认为下面的 sn-p 是您正在寻找的，您可以使用 :eq() selector 来做到这一点：

//Add the highlight using 
$('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');

//Then remove the highlight using 
$('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');

tr:eq(1) 将获得第二行，因为 :eq() 是基于 0 的，th:eq('+$(this).index()+') 将根据悬停的 td 索引选择第一或第二 th。

希望这会有所帮助。

$("td").hover(function(){

  $(this).addClass('highlight').siblings().first().addClass('highlight');

  $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');

$('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');
  
},function(){

  $(this).removeClass("highlight").siblings().first().removeClass('highlight');

  $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');

  $('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');
});

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 90%;
        
}

th, td {
    
    padding:8px;
    
}

td {
    
    text-align: center;
    
}

table {
    
    margin:0 auto;
    
}

td:click {
    
    background-color: blue;
}

.highlight {
    
    background-color:#E0E0E0;
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><th>Item #</th><th>1234567</th><th>7654321</th></tr><tr><th>Product</th><th><u>22oz Dark</u></th><th><u>12ct 4oz Dark</u></th></tr><tr><th>2016-01-01</th><td>9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td>8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td>13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td>14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td>13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td>16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td>15421</td><td>3100</td></tr></table>

Answer 2

你只需要稍微更新一下 jQuery 选择器，以表格的第二行而不是第一行为目标：

$("td").hover(function(){

    $(this).addClass('highlight').siblings().first().addClass('highlight');

    $('tr:nth-child(2) th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');


},function(){

    $(this).removeClass("highlight").siblings().first().removeClass('highlight');

    $('tr:nth-child(2) th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');

});

Answer 3

我更新了你的 jQuery 代码，让它更简洁一些，并解决了你的问题。

为此，我使用了内部 jQuery 函数，例如 .eq()（类似于 CSS :nth-child）来解决它。

$("td").hover(function(){
    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr').eq(1).children('th').eq($(this).index()).addClass('highlight');


},function(){
    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr').eq(1).children('th').eq($(this).index()).removeClass('highlight');

});

Answer 4

见下面的代码。您只需要使用prev()，它就会突出显示之前的td

$("td").hover(function(){
                                
                $(this).addClass('highlight').siblings().first().addClass('highlight');
                
                $('tr:nth-child(n+2) th:eq('+$(this).index()+')').addClass('highlight');
	                       
                
            },function(){
                 $(this).removeClass('highlight').siblings().first().removeClass('highlight');
               
                
                $('tr:nth-child(n+2) th:eq('+$(this).index()+')').removeClass('highlight');
                
            });

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 90%;
        
}

th, td {
    
    padding:8px;
    
}

td {
    
    text-align: center;
    
}

table {
    
    margin:0 auto;
    
}

td:click {
    
    background-color: blue;
}

.highlight {
    
    background-color:#E0E0E0;
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><th>Item #</th><th>1234567</th><th>7654321</th></tr><tr><th>Product</th><th><u>22oz Dark</u></th><th><u>12ct 4oz Dark</u></th></tr><tr><th>2016-01-01</th><td>9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td>8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td>13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td>14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td>13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td>16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td>15421</td><td>3100</td></tr></table>