jQuery jQuery查找具有特定类的单元格的前一个表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2777361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery find previous table row that has a cell with a specific class
提问by theShingles
Suppose I have a table like so:
假设我有一张像这样的表：
<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>
I want to be able to grab the previous "Label Cell" from the "Selected" cell.
我希望能够从“选定”单元格中获取上一个“标签单元格”。
My jQuery script should be something like:
我的 jQuery 脚本应该是这样的：
$('.selected').each(function() {
var label = $(this).parent().prev('tr td.this-is-a-label');
//... do what I need with the label ...
});
But it's not working.
但它不起作用。
Does anyone have any suggestions?
有没有人有什么建议？
回答by Nick Craver
You can do this:
你可以这样做：
$('.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 ...
});
This isn't ideal though, it's a rather expensive DOM traversal, if you can guarantee it's always 2 rows behind, you can do this:
但这并不理想，它是一个相当昂贵的 DOM 遍历，如果你能保证它总是落后 2 行，你可以这样做：
$(this).closest('tr').prev().prev().children('td.this-is-a-label')
...which is much faster, it just depends what assumptions and guarantees you can make about your markup, if there are any certainties, you can definitely make it faster.
...这要快得多，这仅取决于您可以对标记做出哪些假设和保证，如果有任何确定性，您绝对可以使其更快。
回答by Chris Lercher
How about:
怎么样：
var label =
$('.selected').parent().prevAll('tr').children('td.this-is-a-label')[0];
回答by Aneesh
$("td.selected").parents("table").find("td.this-is-a-label").text();
回答by SharpC
You can make it easy by coding in an HTML5 id tag when generating the table:
您可以通过在生成表格时在 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>
You can then use the value, and even perform actions on the associated "parent":
然后您可以使用该值，甚至可以对关联的“父”执行操作：
$("#myTable").on("click", "tr", function() {
var associatedLabelId = $(this).data("parent-label-id");
alert("Parent label of the row clicked: " + associatedLabelId);
$("#" + associatedLabelId).addClass("highlight");
}
回答by Peter McG
Here's how you get references to both the <tr>and <td>dom elements:
以下是获取对 the<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);
});
回答by karim79
I created a little plugin in response to this post for the purpose of finding a cell which is relative to the current cell:
为了找到与当前单元格相关的单元格，我创建了一个小插件来响应这篇文章：
$.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"
?
I used your html for a simple test case. You can mess with it here: http://jsfiddle.net/6kfVL/3/?
我将您的 html 用于一个简单的测试用例。你可以在这里弄乱它：http: //jsfiddle.net/6kfVL/3/？
