Fatal编程技术网
  • javascript/
  • Javascript 使用querySelector查找同级行中包含的下一个单元格

Javascript 使用querySelector查找同级行中包含的下一个单元格

javascript css

Javascript 使用querySelector查找同级行中包含的下一个单元格,javascript,css,Javascript,Css,我试图使用querySelector查找表中下一行的第一个单元格。因此，从第1行开始，找到下一个TR元素，然后找到该TR元素中的第一个子TD元素 但是，当我编写CSS选择器时，它返回null 我的CSS选择器语法是： "tr.row ~ tr td" 下面是一个完整的工作示例： <!DOCTYPE html> <html> <head> <script> function findRow() {

我试图使用
querySelector
查找表中下一行的第一个单元格。因此，从第1行开始，找到下一个TR元素，然后找到该TR元素中的第一个子TD元素

但是，当我编写CSS选择器时，它返回
null

我的CSS选择器语法是：

"tr.row ~ tr td"
下面是一个完整的工作示例：

<!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>


函数findRow（）
{
var row1=document.querySelector（“tr.row”）；
var targetCell=row1.querySelector（“tr.row~tr td”）；
警报（目标细胞）；
}
芬德罗（）；
因此选择器
”.row1
成功地为我提供了id为
row1
的TR元素

但是，第二个选择器，
”.row1~tr td“
，返回
null

现在，如果我不使用
TR
元素调用
querySelector
，而是调用
document.querySelector
，它可以工作。我甚至可以调用
row1.parentNode.querySelector
，然后它也可以工作。这向我表明调用
querySelector
的实际元素不包括在要搜索的元素

不幸的是，这不是一个解决方案。这只是一个简化的示例：在我的实际用例中，我不能从
row1
上方的父元素调用
querySelector
，因为这样我将失去我所处的上下文-（在我的实际用例中，我有许多动态生成的行，因此如果调用
document.querySelector
，甚至
row1.parentNode.querySelector
，我将丢失上下文）

我意识到我可以用普通的DOM遍历循环来实现这一点，但我正在尝试养成在这里使用
querySelector
的习惯，因为这显然对未来更有利。（另外，我在这里没有使用jQuery。）我还怀疑
：scope
选择器在这里会有所帮助，但不幸的是，它还没有得到广泛的支持

因此，可以使用
querySelector
？

执行我想要的操作。使用
querySelector
会很困难。element.querySelector的问题是它只针对子代节点。最好使用

var targetCell=row1.nextElementSibling.cells[0]；

var row1=document.querySelector（“tr.row”），
targetCell=row1.nextElementSibling.cells[0]；
警报（目标单元格）；
由于CSS选择器无法传递到父级，所以最好的方法是使用DOM方法，正如Oriol已经回答的那样

或者，仅使用
querySelector
，如果您确定为每个元素提供一个id，则必须执行以下操作：

document.querySelector("#" + row1.getAttribute("id") + " ~ tr td");
为确保始终以引用行为目标

是的，可以使用
查询选择器
以
单元格2
为目标，但必须使用
文档.查询选择器
，而不是
元素.查询选择器

element.querySelector的问题在于它只针对子代节点，因此同级节点（及其子代）是正确的。从：

返回第一个元素，该元素是调用它的元素的子元素，该元素与指定的选择器组匹配

这里有一把小提琴显示了变化：


你会考虑使用<代码>第n个子< /代码>吗？从@皮特的答案中添加有用的内容。

var targetCell = document.querySelector("#row1 ~ tr td");