Question

什么是通配符，我可以用来选择页面上具有选择器ID的所有内容？ aria-describedby="gridx_Grid_13-9"动态创建了selectorId。每次加载页面时，selectorId的13部分都不相同。

这是我尝试过的操作：var lineAmounts = document.querySelectorAll('[aria-describedby="gridx_Grid_" + * + "-9"]');，但没有用。

Answer 1

您可以结合使用多个attribute selectors。

如果要选择属性aria-describedby以某个字符串开头的所有元素，则可以首先使用^=运算符选择它。与$=运算符结合使用，您可以进一步限制选择范围，并定义属性结尾的外观。

const prefix = 'gridx_Grid_';
const suffix = '-9';

const collection = document.querySelectorAll(
  `[aria-describedby^="${ prefix }"][aria-describedby$="${ suffix }"]`
);

collection.forEach( element => console.log( element.innerText ) );

<div aria-describedby="gridx_Grid_13-9">Text 1</div>
<div aria-describedby="gridx_Grid_10-10">Text 2</div>
<div aria-describedby="gridx_Grid_11-9">Text 3</div>

Answer 2

一种选择是使用选择器字符串：

[aria-describedby^="gridx_Grid_"][aria-describedby$="-9"]

会搜索其aria-describedby属性以所需字符串开头和结尾的元素，但是用aria-describedby遍历所有元素并找到与之匹配的元素会更可靠。情况下，有些元素以这些子字符串开头和结尾，但是中间除了数字之外还有其他东西：

const element = Array.prototype.find.call(
  document.querySelectorAll('[aria-describedby]'),
  element => element.getAttribute('aria-describedby').match(/gridx_Grid_\d+-9/)
);

带通配符的Javascript选择器

2 个答案: