使用querySelector查找同级行中包含的下一个单元格 [英] Find next cell contained in sibling row with querySelector
问题描述
我正在尝试使用 querySelector 在表的NEXT行中查找第一个单元格.因此，从ROW 1开始，找到下一个TR元素，然后在该TR元素中找到第一个子TD元素.
I'm trying to use querySelector to find the first cell in the NEXT row of a table. So, starting from ROW 1, find the next TR element, and then find the first child TD element within that TR element.
但是，当我编写CSS选择器时，它会返回 null .
However, when I write the CSS selector, it returns null.
我的CSS选择器语法是:
My CSS selector syntax is:
"tr.row ~ tr td"
这是一个完整的工作示例:
Here's a full working example:
<!DOCTYPE html>
<html>
<head>
<script>
function findRow()
{
var row1 = document.querySelector("tr.row");
var targetCell = row1.querySelector("tr.row ~ tr td");
alert(targetCell);
}
</script>
</head>
<body>
<table>
<tr class = "row">
<td class = "cell"></td>
</tr>
<tr class = "row">
<td class = "cell"></td>
</tr>
</table>
<script>
findRow();
</script>
</body>
</html>
因此选择器.row1 成功为我提供了ID为 row1 的TR元素.
So the selector ".row1 successfully gives me the TR element with id row1.
但是，第二个选择器.row1〜tr td" 返回 null .
However, the second selector, ".row1 ~ tr td", returns null.
现在，如果我不是使用 TR 元素调用 querySelector ，而是调用 document.querySelector ，它将起作用.我什至可以调用 row1.parentNode.querySelector ，然后它也可以正常工作.这向我表明，调用 querySelector 的实际元素不包含在要搜索的元素集中.
Now, if instead of calling querySelector using the TR element, I call document.querySelector, it works. I can even call row1.parentNode.querySelector, and then it works as well. This indicates to me that the actual Element which calls querySelector is not included in the set of elements to be searched.
不幸的是，这不是解决方案.这只是一个简化的示例:在我的实际用例中，我无法从 row1 上方的父元素调用 querySelector ，因为那样我会失去上下文在-(在我的实际用例中，我有许多动态生成的行，因此，如果我调用 document.querySelector ，甚至是 row1.parentNode.querySelector ，我都会失去了我的上下文).
Unfortunately, that is not a solution here. This is just a simplified example : in my actual use-case, I can't call querySelector from a parent element above row1, because then I will lose the context I'm in - (in my real use case I have many, dynamically-generated rows, so if I call document.querySelector, or even row1.parentNode.querySelector I'll lose my context).
我意识到我可以使用简单的DOM遍历循环来做到这一点，但是我试图在这里养成使用 querySelector 的习惯，因为这显然对将来更好.(此外，我在这里不使用jQuery.)我还怀疑:scope 选择器在这里会有所帮助，但不幸的是，这种选择尚未得到广泛支持.
I realize I can just do this with plain DOM traversal loops, but I'm trying to get in the habit of using querySelector here, since that is obviously better for the future. (Also, I'm not using jQuery here.) I also suspect the :scope selector would help here, but unfortunately that is not yet widely supported.
因此可以使用 querySelector 做我想做的事吗?
So it is possible to do what I want using querySelector?
推荐答案
使用 querySelector 会很困难.element.querySelector的问题在于，它仅针对后代节点.最好使用类似
It will be difficult using querySelector. The problem with element.querySelector is that is only targets descendant nodes. Better use something like
var targetCell = row1.nextElementSibling.cells[0];
var row1 = document.querySelector("tr.row"),
targetCell = row1.nextElementSibling.cells[0];
alert(targetCell);<table>
<tr class="row">
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
</tr>
</table>如果您真的想使用它，则可以在父级上使用:nth-child(k)来引用第 k 个元素.
If you really want to use it, you can use :nth-child(k) on parent to reference the kth element.
var parent = row1.parentElement,
index = [].slice.call(parent.children).indexOf(row1) + 1,
targetCell = parent.querySelector(":nth-child("+index+") ~ tr td");
var row1 = document.querySelector("tr.row"),
parent = row1.parentElement,
index = [].slice.call(parent.children).indexOf(row1) + 1,
targetCell = parent.querySelector(":nth-child("+index+") ~ tr td");
alert(targetCell);<table>
<tr class="row">
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
</tr>
</table>这篇关于使用querySelector查找同级行中包含的下一个单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
