-2

我正在尝试在javascript中转换以下行但出现以下错误

错误：无法在“文档”上执行“querySelectorAll”：“.usuggest li[aria-selected!='true']” Jquery 代码

$(".usuggest li[aria-selected!='true']").eq(0).attr('aria-selected', 'true');

javascript

document.querySelectorAll(".usuggest li[aria-selected!='true']")[0].setAttribute('aria-selected', 'true')
4

2 回答 2

2

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll的参考资料提到您传递的选择器必须是有效的 CSS 选择器。事实上，如果您查看代码生成的完整错误，它会给出以下信息：

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.usuggest li[aria-selected!='true']' is not a valid selector.

告诉我们选择器有问题。

移至 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 的 CSS 选择器和https://developer.mozilla.org/en-US/docs/Web/CSS的属性选择器/Attribute_selectors，我们看到选择一个属性，!=不是一个有效的操作符。从Can't find a "not equal" css 属性选择器中，我们可以看到我们需要预先添加 with:not以应用逆，然后进行相等性检查。

这为我们提供了以下更新的 JavaScript

document.querySelectorAll(".usuggest li:not([aria-selected='true'])")

哪个应该做你想做的。

然后，这使整个查询：

document.querySelectorAll(".usuggest li:not([aria-selected='true'])")[0].setAttribute('aria-selected', 'true');

由于querySelectorAll可能不会返回结果，我建议您执行以下操作：

const falseListItems = document.querySelectorAll(".usuggest li:not([aria-selected='true'])");

if (falseListItems.length > 0) {
    falseListItems[0].setAttribute('aria-selected', 'true');
}

如果你可以保证查询将导致单个结果，那么额外的 if 语句当然是不必要的。

于 2021-05-11T17:41:46.293 回答
-2

您可以将命令拆分为 2-3 行，以便轻松调试，

const element = document.querySelectorAll(".usuggest li[aria-selected!='true']");

// 你可以在这里检查值 0f 元素：console.log(element);

element[0].setAttribute('aria-selected', 'true');

如果这也导致错误，请回复输出 console.log(element);

于 2021-05-11T17:39:45.790 回答