javascript - 访问动态生成的 div id

Question

我有一些通过 php 动态生成的 div id

<div id='a<?php echo $gid?>>

如何在 JavaScript 中访问它们？所有这些 div 都以“A”开头，后跟一个数字。

是否有某种搜索功能

getElementById(a*)?

感谢您的帮助

Answer 1

没有用于此的通用 JavaScript 函数(至少不是跨浏览器的函数)，但您可以使用 .getElementsByTagName 并迭代结果:

var arrDivs = document.getElementsByTagName("div");
for (var i = 0; i < arrDivs.length; i++) {
    var oDiv = arrDivs[i];
    if (oDiv.id && oDiv.id.substr(0, 1) == "a") {
        //found a matching div!
    }
}

这是您可以获得的最低级别，因此您不必担心旧浏览器、新浏览器或 future 的浏览器。

要将它包装成一个更简洁的函数，您可以:

function GetElementsStartingWith(tagName, subString) {
    var elements = document.getElementsByTagName(tagName);
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.id && element.id.substr(0, subString.length) == subString) {
            result.push(element);
        }
    }
    return result;
}

用法示例是:

window.onload = function() {
    var arrDivs = GetElementsStartingWith("div", "a");
    for (var i = 0; i < arrDivs.length; i++) {
        arrDivs[i].style.backgroundColor = "red";
    }
};

Live test case .

如果您在某些时候选择使用 jQuery(仅此一项不值得)，以上所有代码将变为单行:

$(document).ready(function() {
    $('div[id^="a"]').css("background-color", "blue");
});

Updated fiddle, with jQuery .