[英]jQuery: get parent tr for selected radio button
I have the following HTML: 我有以下HTML:
<table id="MwDataList" class="data" width="100%" cellspacing="10px">
....
<td class="centerText" style="height: 56px;">
<input id="selectRadioButton" type="radio" name="selectRadioGroup">
</td>
....
</table>
In other words I have a table with few rows, in each row in the last cell I have a radio button. 换句话说,我有一个几行的表,在最后一个单元格的每一行中我都有一个单选按钮。
How can I get parent row for selected radio button? 如何获取所选单选按钮的父行?
What I have tried: 我尝试过的:
function getSelectedRowGuid() {
var row = $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr");
var guid = GetRowGuid(row);
return guid;
}
But it seems like this selector is incorrect. 但似乎这个选择器不正确。
Try this. 试试这个。
You don't need to prefix attribute name by @
in jQuery selector. 您不需要在jQuery选择器中使用@
前缀属性名称。 Use closest()
method to get the closest parent element matching the selector. 使用closest()
方法获取与选择器匹配的最接近的父元素。
$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');
You can simplify your method like this 您可以像这样简化您的方法
function getSelectedRowGuid() {
return GetRowGuid(
$("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr"));
}
closest()
- Gets the first element that matches the selector, beginning at the current element and progressing up through the DOM tree. closest()
- 获取与选择器匹配的第一个元素,从当前元素开始并逐步向上遍历DOM树。
As a side note, the ids of the elements should be unique on the page so try to avoid having same ids for radio buttons which I can see in your markup. 作为旁注,元素的id应该在页面上是唯一的,所以尽量避免使用相同的单选按钮,我可以在标记中看到。 If you are not going to use the ids then just remove it from the markup. 如果您不打算使用ID,则只需将其从标记中删除即可。
$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');
Using .closest()
: 使用.closest()
:
var $row = $(this).closest("tr");
Using .parent()
: 使用.parent()
:
Check this .parent()
method. 检查此.parent()
方法。 This is alternative of a .prev()
and .next()
. 这是.prev()
和.next()
替代方法。
var $row = $(this).parent() // Moves up from <button> to <td>
.parent(); // Moves up from <td> to <tr>
<td>
获取所有表格单元格<td>
var $row = $(this).closest("tr"), // Finds the closest row <tr>
$tds = $row.find("td"); // Finds all children <td> elements
$.each($tds, function() { // Visits every single <td> element
console.log($(this).text()); // Prints out the text within the <td>
});
<td>
仅获取特定<td>
var $row = $(this).closest("tr"), // Finds the closest row <tr>
$tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element
$.each($tds, function() { // Visits every single <td> element
console.log($(this).text()); // Prints out the text within the <td>
});
.closest()
- get the first element that matches the selector .closest()
- 获取与选择器匹配的第一个元素 .parent()
- get the parent of each element in the current set of matched elements .parent()
- 获取当前匹配元素集中每个元素的父元素 .parents()
- get the ancestors of each element in the current set of matched elements .parents()
- 获取当前匹配元素集中每个元素的祖先 .children()
- get the children of each element in the set of matched elements .children()
- 获取匹配元素集中每个元素的子元素 .siblings()
- get the siblings of each element in the set of matched elements .siblings()
- 获取匹配元素集中每个元素的兄弟.siblings()
.find()
- get the descendants of each element in the current set of matched elements .find()
- 获取当前匹配元素集中每个元素的后代 .next()
- get the immediately following sibling of each element in the set of matched elements .next()
- 获取匹配元素集中每个元素的紧随其后的兄弟 .prev()
- get the immediately preceding sibling of each element in the set of matched elements .prev()
- 获取匹配元素集中每个元素的前一个兄弟
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.