使用jQuery查找前一个包含特定类别单元格的表格行

Question

假设我有一个如下的表格：

<table>
    <tr><td class="this-is-a-label">Label Cell</td></tr>
    <tr><td>Detail 1</td></tr>
    <tr><td class="selected">Detail 2</td></tr>
</table>

我希望能够获取“选定”单元格之前的“标签单元格”。

我的 jQuery 脚本应该是这样的:

$('.selected').each(function() {
    var label = $(this).parent().prev('tr td.this-is-a-label');
    //... do what I need with the label ...
});

但是它并没有起作用。

有人有什么建议吗？

- theShingles

Answer 1

你可以这样做：

$('.selected').each(function() {
  var label = $(this).closest('tr').prevAll('tr:has(td.this-is-a-label):first')
                     .children('td.this-is-a-label');
  //... do what I need with the label ...
});

不过，这并不理想，因为它是一个相当昂贵的DOM遍历操作。如果你能保证它总是比当前行少2行，那么可以这样做：

$(this).closest('tr').prev().prev().children('td.this-is-a-label')

……这样做速度会更快，只要您对标记语言进行了充分的假设和保证。如果有任何确定性，您肯定可以使其更快。

- Nick Craver

---

是的，它相当昂贵，但是这是必要的。不幸的是，没有任何保证。谢谢你的帮助。 - theShingles

Answer 2

如何：

var label = 
  $('.selected').parent().prevAll('tr').children('td.this-is-a-label')[0];

- Chris Lercher

Answer 3

$("td.selected").parents("table").find("td.this-is-a-label").text();

- Aneesh

Answer 4

在生成表格时，通过编写HTML5 id标签来简化操作：

<table id="myTable">
    <tr id="label1"><td class="this-is-a-label">Label Cell</td></tr>
    <tr data-parent-label-id="label1"><td>Detail 1</td></tr>
    <tr data-parent-label-id="label1"><td class="selected">Detail 2</td>   </tr>
</table>

然后您可以使用该值，甚至对关联的“父级”执行操作：

$("#myTable").on("click", "tr", function() {
    var associatedLabelId = $(this).data("parent-label-id");
    alert("Parent label of the row clicked: " + associatedLabelId);
    $("#" + associatedLabelId).addClass("highlight");
}

- SharpC

Answer 5

以下是如何获取对 <tr> 和 <td> DOM 元素的引用：

$("tr:has(td.selected)").each(function(i, trSel){
    var trLabel = $(trSel).prevAll("tr:has(td.this-is-a-label)").get(0);

    var tdSel = $(trSel).children("td.selected").get(0);
    var tdLabel = $(trLabel).children("td.this-is-a-label").get(0);

    console.log(trSel, tdSel);
    console.log(trLabel, tdLabel);
});

- Peter McG

Answer 6

我创建了一个小插件来响应这篇文章，目的是查找与当前单元格相关的单元格：

$.fn.cellFromCell = function(r,c,upOrDown) {
    if(upOrDown == 'down') {
        return $(this).parent().prevAll(':eq(' + r + ')').find('td:eq(' + c + ')').text();
    } else {
        return $(this).parent().nextAll(':eq(' + r + ')').find('td:eq(' + c + ')').text();
    }
}

alert($('.selected').cellFromCell(1, 0, 'down')); // alerts "Label Cell"
alert($('.this-is-a-label').cellFromCell(0, 0)); // alerts "Detail 1"
​

我使用了你的HTML来进行一个简单的测试案例。你可以在这里随意更改它：http://jsfiddle.net/6kfVL/3/

- karim79