使用部分ID查找元素

Question

13

我有一些类似于 this_div_id_NUMBER 的id，所有的 div 元素都有不同的 NUMBER 部分。如何只使用 this_div_id 部分的id来查找所有的 div 元素？

- nowiko

1

你能发布你的div吗？我们无法想象那么多。 - Nad

@User089247，这不是多个相同的ID，而是几个类似的ID，但它们都是唯一的。 - Scimonster

1

@NadeemKhan 是的，我们可以。问题已经被描述得足够清楚了。并不是每件事情都需要HTML代码。 - Scimonster

@Scimonster：好的，我明白了。无论如何，抱歉。 - Nad

6个回答

14

`querySelectorAll`

querySelectorAll 接受 CSS 选择器并返回匹配该 css 选择器的所有元素的 HTMLNodeList（一种数组）。

CSS 选择器^（以此开头）可用于您的目的。 在本文中了解更多信息。

对于您的情况，可以使用 document.querySelectorAll("[id^='this_div_id']");。

请注意，querySelectorAll 不返回实时节点列表。这意味着，对 DOM 的任何更改都不会实时更新函数返回值中的内容。

另一种方法是给所有元素分配特定类，然后可以使用 getElementsByClassName（比 querySelector 快得多）。

var divs = document.getElementsByClassName("divClass");

- user3459110

4

尝试使用这个选择器：

[id^="this_div_id_"]

纯 JavaScript：(参考文档)

document.querySelectorAll('[id^="this_div_id_"]')

jQuery: (reference)

$('[id^="this_div_id_"]')

CSS: (reference)

[id^="this_div_id_"] {
    /* do your stuff */
}

为什么这个有效？

在选择器中使用 []，可以选择属性。使用 '=' 精确匹配值，或者使用 '^=' 检查值是否以某个值开头。在这里了解更多。

- ReeCube

不要无缘无故地包含JavaScript或CSS。 - ReeCube

3

- pawel

1

最好使用类。但是有一个解决方案，您需要（假设您使用jQuery）：

$("*[id^='this_div_id']")

- alex_b

1

只需使用属性选择器，如下所示：
$("[id^='this_div_id_']")

- Abruzzi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dandavis · Accepted Answer

你可以使用 querySelectorAll 命中部分属性，包括 ID：

document.querySelectorAll("[id^='this_div_id']")

等号旁边的^表示“以……开头”，您可以使用*代替，但这样容易产生误报。

为了在querySelectorAll中实现最大兼容性，您还需要确保在属性选择器中使用引号（或撇号）引用比较值；在jQuery和新版本浏览器中没有影响，但在旧版浏览器中很重要。

编辑：最近有更具体的选择器需求：

document.querySelectorAll("[id^='this_div_id']:not([id$='_test_field'])");

not()段阻止以"_test_field"结尾的任何内容进行匹配。