Question

我正试图在div中获得第2排第7行第1行。

我试过

$('#WebPartWPQ1 table:first table:first tr:nth-child(6) td:first').html('test')

但它没有显示任何内容

<div id='WebPartWPQ1'>
  ....
  ....
  <table>
     <tbody>
        <tr>
          <td>
            <span>
                ....
                .....
                <table>
                  <tbody>
                    ...
                    <tr> //7th row
                       <td> //1st td
                          <h3>
                            <nobr>
                                 This value has to change
                            </nobr>
                          </h3>
                        </td>

如何解决这个问题？

Answer 1

.nth-child()

描述：选择所有父元素的第n个子元素。

index：要匹配的每个子项的索引，从1开始，字符串偶数或奇数，或等式（例如：nth-child（even），：nth-child（4n））

:nth-child()首先更改:nth-child(6)至:nth-child(7)。
$('#WebPartWPQ1 table table tr:nth-child(7) td:first').html('test')使用此选择器。

Answer 2

使用此::

这里是https://jsfiddle.net/shantaram/fvznopns/4/

您已使用html('test')来获取您需要使用的html html()

$('.wrap table').find('table tr:nth-child(7) td:first').html("TEXT")

OR

$('.wrap table').find('table tr:nth-child(7) td:first').text("TEXT")

Answer 3

我认为我们可以像jQuery eq()选择器那样做。此调用的结果是第7项的灰色背景。注意所提供的索引从零开始，并且引用到jQuery对象中元素的位置，而不是在DOM树中。

$(function(){

  $('table tr td > table').find('tr').eq(6).addClass('selected');

});

$(function(){
	
$('table tr td > table').find('tr').eq(6).addClass('selected');
	
});

table {
	border:1px solid #000;
}
td {
	width:200px;
	border:1px solid #d1d1d1;
}
.selected {
  background:#ddd;
}

<table>
<tbody>
	<tr>
    	<td>ad</td>
        <td>ad</td>
        <td>
        	<table>
            <tbody>
            	<tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
                <tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
                <tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
                <tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
                <tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
                <tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
                <tr>
                	<td>ad</td>
                    <td>ad</td>
                </tr>
            </tbody>
            </table>
        </td>
    </tr>
</tbody>    
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 4

如果您循环遍历行，那么有一个更好的解决方案。

您可以将行class和data属性直接定位为 -

<tr class='myRow' data-index='7'> //guessing you are getting index while looping through

然后你直接查询，将返回你的行 -

var row = $('.myRow').data('index',7)

当然，也有很多可能的方法。

尝试使用jQuery到达1st table第7行1st td

4 个答案: