Question

我需要选择HTML表的第n行，只知道所选行的id。这是我的情况：JSFiddle Demo

<table class="mytable1">
    <tr><td id="12">1.0</td></tr>
    <tr><td id="20">1.1</td></tr>
    <tr><td id="120">1.2</td></tr>
    <tr><td id="260">1.3</td></tr>
    <tr><td id="2">1.4</td></tr>
    <tr><td id="100">1.5</td></tr>
    <tr><td id="23">1.6</td></tr>
</table>

例如，我希望fondOut从我知道其ID的第2行<tr>，在这种情况下，必须在<tr><td id="260">1.3</td></tr>上启动fadout动画

更清楚的是，这是最终的预期结果：

$("#"+"260").closest("tr").fadeOut();

由于

Answer 1

如果您需要在已知之后获得第n行，则可以使用index和:eq选择器执行以下操作：

var n = 2; var index = $("#20").closest("tr").index() + n; $('.mytable1 tr:eq(' + index + ')').fadeOut();

演示：http://jsfiddle.net/896kxjn1/14/

Answer 2

如果你知道表格中的元素索引：nth-child（index）可以是一个解决方案，

$("table tr:nth-child(2)").fadeOut();

如果你只知道id，那么不是索引，那么得到那个元素的索引，

// added 1 as .index() is indexed with 0 but in :nth-child(n) n is indexed 1
var elementIndex = $("#20").parent().index() + 1;
$("table tr:nth-child(" + elementIndex + ")").fadeOut();

jsFiddle

资源： :nth-child(index)，.index()

Answer 3

我想淡出第二行

然后您可以使用:eq(index)执行此操作：

 $('.mytable1 tr:eq(1)').fadeOut();

由于:eq()基于zero, 0所以它的索引从0开始，所以第二项是索引1.

Answer 4

您还可以使用nextAll，然后使用索引：

$("#"+"20"+"").closest("tr").nextAll('tr').eq(n-1).fadeOut();

这样，如果你不想，你不必从表本身开始。

Fiddle

Answer 5

显然，使用jQuery的功能有更好的方法来实现这一点我甚至都不知道存在。

但是，我会发布我的答案，以便展示一种公平，程序化的方法来实现这一目标。它可以帮助某人理解解决这个问题背后的思维过程。

// Create an array of tr elements from your table
row_list = $('table.mytable1 tr');

// Get the actual DOM element selected by jQuery with [0]
selected_row = $("#"+"20").closest("tr")[0];

// Use some function to set "nth"
nth_add = 2;

for (var i = 0; i < row_list.length; i++) {
    // Find the index of the current element, and add nth
    if (row_list[i] == selected_row) {
        select_new_index = i + nth_add;
        break;
    }
}

// Perform your manipulation on the index + nth element.
$(row_list[select_new_index]).fadeOut();

这是updated JSFiddle.

如何在jQuery中选择第n个HTML行

5 个答案:

演示：http://jsfiddle.net/896kxjn1/14/