选择没有特定 class 的 table 行
Selecting a table row that does not have a specific class
我正在尝试将输入集中在 table 行中,但我需要 'jump' 一些具有特定 class.
的 tr
我已经用 next/nextAll/nextUntil 试过了,但我唯一能做的就是 select 最后一个输入,而不是下一个。
在我的示例中,要聚焦的输入是第三个,但它正在聚焦最后一个。
<table>
<tr class="product selected">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product to_ignore">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info to_ignore">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
</table>
$('tr.selected').nextAll('.product').not('.to_ignore, .info').find(".foo").select();
您的问题是您选择了所有 .product
,而不仅仅是第一个符合您条件的。因此,您的代码首先选择了第三个输入,然后选择了第四个,然后再次取消选择了第三个。
所以基本上你所要做的就是在.find()
之前添加.first()
:
var button = $("button");
button.on("click", function(){
$('tr.selected').nextAll('.product').not('.to_ignore, .info').first().find(".foo").select();
$('tr.selected').removeClass('selected');
$('input:focus').closest('tr').addClass('selected');
})
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
table {
border: 1px solid black;
}
tr.selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="jump">Jump</button>
<table>
<tr class="product selected">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product to_ignore">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info to_ignore">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
</table>
我正在尝试将输入集中在 table 行中,但我需要 'jump' 一些具有特定 class.
的 tr我已经用 next/nextAll/nextUntil 试过了,但我唯一能做的就是 select 最后一个输入,而不是下一个。 在我的示例中,要聚焦的输入是第三个,但它正在聚焦最后一个。
<table>
<tr class="product selected">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product to_ignore">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info to_ignore">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
</table>
$('tr.selected').nextAll('.product').not('.to_ignore, .info').find(".foo").select();
您的问题是您选择了所有 .product
,而不仅仅是第一个符合您条件的。因此,您的代码首先选择了第三个输入,然后选择了第四个,然后再次取消选择了第三个。
所以基本上你所要做的就是在.find()
之前添加.first()
:
var button = $("button");
button.on("click", function(){
$('tr.selected').nextAll('.product').not('.to_ignore, .info').first().find(".foo").select();
$('tr.selected').removeClass('selected');
$('input:focus').closest('tr').addClass('selected');
})
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
table {
border: 1px solid black;
}
tr.selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="jump">Jump</button>
<table>
<tr class="product selected">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product to_ignore">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info to_ignore">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
<tr class="product">
<td>
<input type="text" class="foo">
</td>
</tr>
<tr class="info">
</tr>
</table>