Question

我尝试使用querySelector查找表格NEXT行中的第一个单元格。因此，从ROW 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>

因此，选择器".row1成功地为我提供了标识为row1的TR元素。

但是，第二个选择器".row1 ~ tr td"会返回null。

现在，如果不是使用querySelector元素调用TR，而是调用document.querySelector，它就可以了。我甚至可以打电话给row1.parentNode.querySelector，然后它也能正常工作。这向我表明调用 querySelector的实际元素不包含在要搜索的元素集中。

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

我意识到我可以用普通的DOM遍历循环来做这件事，但我试图养成在这里使用querySelector的习惯，因为这显然对未来更好。（另外，我在这里没有使用jQuery。）我也怀疑:scope选择器在这里会有所帮助，但不幸的是，这还没有被广泛支持。

所以可以使用querySelector做我想做的事情吗？

Answer 1

使用querySelector会很困难。 element.querySelector的问题是它只是目标后代节点。更好地使用像

这样的东西

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

＆＃13;

var row1 = document.querySelector("tr.row"),
    targetCell = row1.nextElementSibling.cells[0];
alert(targetCell);

＆＃13;

<table>
  <tr class="row">
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
  </tr>
</table>

＆＃13;

如果您确实想要使用它，可以在父级上使用:nth-child(k)来引用k元素。

var parent = row1.parentElement,
    index = [].slice.call(parent.children).indexOf(row1) + 1,
    targetCell = parent.querySelector(":nth-child("+index+") ~ tr td");

＆＃13;

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);

＆＃13;

<table>
  <tr class="row">
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
  </tr>
</table>

＆＃13;

Answer 2

是的，可以使用#cell2定位querySelector，但您必须使用document.querySelector，而不是element.querySelector来执行此操作。< / p>

element.querySelector的问题是只有后代节点的目标，所以兄弟节点（及其后代）就是正确的。来自MDN：

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

这是表示变化的小提琴：http://jsfiddle.net/usho2t63/

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

Answer 3

由于CSS选择器无法传递给父母，因此最好的方法是使用DOM方法，正如Oriol已经回答的那样。

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

document.querySelector("#" + row1.getAttribute("id") + " ~ tr td");

确保始终定位引用的行

使用querySelector查找包含在兄弟行中的下一个单元格

3 个答案: