查找所有以相同字符串开头的id元素

Question

我有一个XSL，它创建了多个带有"id"属性的元素，其中"id"属性的值为"createdOn"+$unique-id。

Example : createdOnid0xfff5db30

我想使用JavaScript查找并将它们存储在变量中。我已经尝试过

var dates = document.getElementsById(/createdOn/);

但是那似乎不起作用。

- meriley

---

可能是 getElementById() 通配符 的重复问题。 - Liam

Answer 1

使用jQuery，您可以使用attr starts with选择器：

var dates = $('[id^="createdOnid"]');

使用现代浏览器，您可以与 querySelectorAll 一起使用 CSS3属性值以开头 选择器:

var dates = document.querySelectorAll('[id^="createdOnID"]');

但是如果要为旧浏览器提供备选方案（并且不使用jQuery），您需要：

var dateRE = /^createdOnid/;
var dates=[],els=document.getElementsByTagName('*');
for (var i=els.length;i--;) if (dateRE.test(els[i].id)) dates.push(els[i]);

- Phrogz

---

@Šime 我也不知道答案，无论是针对 jQuery，W3C 规范还是现实世界的浏览器行为。但它不会影响功能 :) - Phrogz

太酷了！我使用 self.driver.execute_script("return document.querySelectorAll... ")[0].click() 让Selenium实现了这个操作。 - Sergey Orshanskiy

如果你要查找的字符串不是硬编码（存储在变量中），那么它该如何使用呢？ - magmine

Answer 2

你应该只使用简单的CSS 选择器，再结合JavaScript的.querySelectorAll()方法。

在你的情况下：

var dates = document.querySelectorAll('[id^="createdOnId"]');

- Daut

Answer 3

因为您没有打上jQuery标签，而且您可能也不需要它，所以我的建议是在创建这些元素时添加一个类。然后使用大多数浏览器内置的getElementsByClassName()函数。对于IE，您需要添加类似这样的东西：

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}

- Isaac Fife

---

通过创建一个正则表达式可以更容易快捷地测试一个特定类的className: var lookingFor = new RegExp('(?:^|\\s)'+arguments[0]+'(?:\\s|$)'); ... if (lookingFor.test(el.className)){ ... } - Phrogz

Answer 4

function idsLike(str){
    var nodes= document.body.getElementsByTagName('*'),
    L= nodes.length, A= [], temp;
    while(L){
        temp= nodes[--L].id || '';
        if(temp.indexOf(str)== 0) A.push(temp);
    }
    return A;
}

idsLike('createdOn')

- kennebec

Answer 5

请尝试以下操作：

var values = new Array(valueKey_1);
var keys = new Array("nameKey_1");
var form = document.forms[0];
for (var i = 0; i < form.length; i++) {
    name = form.elements[i].name;
    var startName = name.toLowerCase().substring(0, 18);
    if (startName == 'startStringExample') {
    values.push(name.value);
    keys.push(name);
    }
}

- PeterPink