jQuery第一个孩子的第n个孩子

我有下面的当前代码，以突出显示顶部行和日期以及我的鼠标结束的html表的单元格。我对jQuery仍然很陌生，对第一个孩子还没有很好的把握。不要突出显示项目＃我想突出显示产品名称（列中的第二个）。我知道我必须为第一个孩子的第n个孩子编辑addClass和removeClass行，但我不确定如何突出显示当前突出显示的单元格下面的单元格。预先感谢任何帮助！jQuery第一个孩子的第n个孩子

$("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>

来源

2016-10-28 Brandon

我想强调的产品名称（第二列日向下）

我认为下面的代码片段是你在寻找什么，你能做到这一点使用: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>

来源

2016-10-28 12:29:05

见下面的代码。你只需要使用prev()所以它会突出prevous td

$("td").hover(function(){ 
 
           
 
       $(this).addClass('highlight').siblings().first().addClass('highlight'); 
 
       
 
       $('tr:nth-child(n+2) th:eq('+$(this).index()+')').addClass('highlight'); 
 
\t       
 
       
 
      },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>

来源

2016-10-28 12:17:29 Bharat

这是不正确的，我知道，需要在第一胎/第n个孩子行进行的更改。您更改了突出显示产品日期的行。运行你发布的代码之上的代码，你会明白我的意思。鼠标悬停在单元格上，日期和产品名称应该突出显示。 – Brandon

@Brandon是的，现在我已经改变了，它的工作按照你的要求 – Bharat

@BharatPatidar你的代码其实还是错的。只需点击运行代码片段，您就可以轻松看到它无法正常工作。上面的其他人已经帮助我解决了我的问题。感谢您的帮助Zakaria Acharki！ – Brandon

你只需要稍微更新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'); 

});

来源

2016-10-28 12:18:24

我更新了您的jQuery代码，并使其更清洁一些，并解决了您的问题。为此，我使用了像.eq()这样的内部jQuery函数（类似于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'); 

});

来源

2016-10-28 12:27:47 wigi

jQuery第一个孩子的第n个孩子

回答

相关问题