在querySelectorAll的选择器中使用变量

Using a variable inside a selector for querySelectorAll

本文关键字：变量 选择器 querySelectorAll      更新时间：2023-09-26

我正在用Nightwatch编写一个单元测试脚本，并试图迭代页面上几个子元素中包含的任何"a"标记。我试图使用querySelectorAll来获取每个子级中"a"标记的数量，但当我向选择器引入迭代变量时，该语句似乎不起作用。

在for循环中调用以下函数，并传递x变量：

browser.execute(function() {
    return document.querySelectorAll("div.field-item.even *:not(a):nth-child(" + x + ") a").length;
},
    function(links){
        a_total = links.value;
        console.log("a total: " + links.value);
});

这个上下文中的x变量应该是1，但这就是代码返回的值，而不管x等于什么：

a total: [object Object]

我不知道它为什么要返回一个对象，而它应该返回一个数字。如果我把x变量换成一个静态数字，它似乎也很奇怪。例如，

return document.querySelectorAll("div.field-item.even *:not(a):nth-child(1) a").length;

给我以下信息：

a total: 2

我不知道选择器为什么返回一个对象。我以为选择器只是一个字符串。为什么当我把一个变量放入选择器字符串时，它似乎不起作用？

问题似乎是因为我没有将x传递给.execute函数。我找到了一个关于这个问题的GitHub主题。

以下代码似乎有效：

browser.execute(function(x) {
    return document.querySelectorAll("div.field-item.even *:not(a):nth-child(" + x + ") a").length;
}, [x],
function(links){
    console.log("a total: " + links.value);
});
相关文章：