javascript 使用部分 ID 查找元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26625336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find elements using part of ID
提问by nowiko
I have, the div's where id looks like this_div_id_NUMBER, all div's has the different NUMBERpart. How I find all div's just using this_div_idpart of id ?
我有，divid 看起来像的地方this_div_id_NUMBER， alldiv有不同的NUMBER部分。我如何找到所有div的只是使用this_div_idid 的一部分？
回答by dandavis
you can use querySelectorAll to hit partial attribs, including ID:
您可以使用 querySelectorAll 来点击部分属性，包括 ID：
document.querySelectorAll("[id^='this_div_id']")
the ^ next to the equal sign indicates "starts with", you can use * instead, but it's prone to false-positives.
等号旁边的 ^ 表示“开始于”，您可以使用 * 代替，但它容易出现误报。
you also want to make sure to use quotes (or apos) around the comapare value in attrib selectors for maximum compatibility on querySelectorAll; in jQuery and evergreen browsers it doesn't matter, but in vanilla for old browsers it does matter.
您还希望确保在 attrib 选择器中的 comapare 值周围使用引号（或 apos），以最大程度地兼容 querySelectorAll；在 jQuery 和常绿浏览器中这无关紧要，但在旧浏览器的 vanilla 中却很重要。
EDIT: late breaking requirement needs a more specific selector:
编辑：后期破坏要求需要更具体的选择器：
document.querySelectorAll("[id^='this_div_id']:not([id$='_test_field'])");
the not() segment prevents anything ending with "_test_field" from matching.
not() 段阻止以“_test_field”结尾的任何内容匹配。
proof of concept / demo: http://pagedemos.com/partialmatch/
概念证明/演示：http: //pagedemos.com/partialmatch/
回答by user3459110
querySelectorAll
querySelectorAll
querySelectorAll takes CSS selectors and returns a HTMLNodeList (a kind of array) of all the elements matching that css selector.
querySelectorAll 采用 CSS 选择器并返回与该 css 选择器匹配的所有元素的 HTMLNodeList（一种数组）。
The css selector ^(starts with) can be used for your purpose. Learn more about it in this article.
css 选择器^（以）可用于您的目的。在本文中了解更多相关信息。
For your case, it would be document.querySelectorAll("[id^='this_div_id']");
对于你的情况，这将是 document.querySelectorAll("[id^='this_div_id']");
Note that querySelectorAlldoesn't return a live node list. That means, any changes to the dom would not be updated live in the return value of the function.
请注意，querySelectorAll它不会返回活动节点列表。这意味着，对 dom 的任何更改都不会在函数的返回值中实时更新。
Another method would to assign all your elements a specific class and then you can use getElementsByClassName(which is much faster than querySelector).
另一种方法是为所有元素分配一个特定的类，然后您可以使用getElementsByClassName（这比 querySelector 快得多）。
var divs = document.getElementsByClassName("divClass");
回答by pawel
回答by ReeCube
Try this selector:
试试这个选择器：
[id^="this_div_id_"]
Pure JavaScript: (reference)
纯 JavaScript：（参考）
document.querySelectorAll('[id^="this_div_id_"]')
jQuery: (reference)
jQuery：（参考）
$('[id^="this_div_id_"]')
CSS: (reference)
CSS：（参考）
[id^="this_div_id_"] {
/* do your stuff */
}
Why is this working?
为什么这是有效的？
With the [] in the selector, you can select attributes. Use '=' to match exactly the value or use the '^=' to check if the value starts with. Read more about this here.
使用选择器中的 []，您可以选择属性。使用 '=' 来精确匹配值或使用 '^=' 来检查值是否以 开头。在此处阅读更多相关信息。
回答by alex_b
It is better to use classes. But there is one solution that you need (assuming you use jQuery):
最好使用类。但是您需要一种解决方案（假设您使用 jQuery）：
$("*[id^='this_div_id']")
回答by Abruzzi
Just using attribute selector like below:$("[id^='this_div_id_']")
只需使用如下属性选择器：$("[id^='this_div_id_']")
