更新时间:2023-12-04 12:34:34
练习的目的是找到包含信息的行.当我们到达那里时,我们可以轻松提取所需的信息.
The object of the exercise is to find the row that contains the information. When we get there, we can easily extract the required information.
$(".use-address").click(function() {
var $item = $(this).closest("tr") // Finds the closest row <tr>
.find(".nr") // Gets a descendent with class="nr"
.text(); // Retrieves the text within <td>
$("#resultas").append($item); // Outputs the answer
});
现在让我们关注在这种情况下的一些常见问题.
Now let's focus on some frequently asked questions in such situations.
使用 .closest()
:
var $row = $(this).closest("tr");
使用 .parent()
:
您还可以使用 .parent()
向上移动 DOM 树> 方法.这只是有时与 .prev()
和 .next()
一起使用的替代方法.
You can also move up the DOM tree using .parent()
method. This is just an alternative that is sometimes used together with .prev()
and .next()
.
var $row = $(this).parent() // Moves up from <button> to <td>
.parent(); // Moves up from <td> to <tr>
<td>
值所以我们有我们的 $row
并且我们想输出表格单元格文本:
<td>
valuesSo we have our $row
and we would like to output table cell text:
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>
元素的索引.
Similar to the previous one, however we can specify the index of the child <td>
element.
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()
- 获取第一个匹配的元素选择器.parent()
- 获取每个元素的父级当前匹配的元素集.parents()
- 获取每个元素的祖先当前匹配的元素集.children()
- 获取每个元素的子元素匹配元素的集合.siblings()
- 获取每个元素的兄弟姐妹匹配元素的集合.find()
- 获取每个元素的后代当前匹配的元素集.next()
- 获取每个的紧随其后的兄弟匹配元素集合中的元素.prev()
- 获取每个前一个兄弟匹配元素集合中的元素