带通配符的 Javascript 选择器

标签 javascript css-selectors

我可以使用什么通配符来选择页面上具有此 selectId 的所有内容? aria-describedby="gridx_Grid_13-9" SelectorId 是动态创建的。 13每次加载页面时,selectorId 的一部分都会不同。

这是我尝试过的:var lineAmounts = document.querySelectorAll('[aria-describedby="gridx_Grid_" + * + "-9"]');那是行不通的。

最佳答案

您可以使用多个 attribute selectors 的组合.

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

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>

关于带通配符的 Javascript 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53197181/

相关文章:

c# - 在不刷新的情况下在 Page_Unload 上更新 session 值?

css - 选择不在某些元素内的元素

CSS 属性选择器与兄弟选择器混合

css - 我将如何设置 :checked radio button? 之后的文本样式

CSS 菜单三 Angular 形不起作用

php - 动态Javascript文件换行符和回车符

javascript - 我如何以 Angular 方式制作嵌套数组

javascript - 如何使用正则表达式模式验证版本号

javascript - SvelteKit 维护模式

html - 第 n 个奇/偶子元素 h3