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!
    }
}

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

要将其包装成更整洁的功能，您可以：

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

Answer 2

不，您需要getElementById的固定ID值才能正常工作。但是，还有其他方法可以在DOM中搜索元素（例如，通过CSS类）。

Answer 3

您可以使用querySelectorAll获取ID为a的所有div。然后检查每一个以查看它是否包含数字。

var aDivs = document.querySelectorAll('div[id^="a"]');
for(var index = 0, len = aDivs.length; index < len; index++){
    var aDiv = aDivs[index];
    if(aDiv.id.match(/a\d+/)){
       // aDiv is a matching div
    }
}

DEMO：http://jsfiddle.net/NTICompass/VaTMe/2/

Answer 4

好吧，我问自己为什么需要选择/获取一个具有随机ID的元素。我想，你想对每个具有随机ID的div做一些事情（比如安排或调整它们）。在那种情况下 - ＆gt;使用随机ID为您的元素提供类似“myGeneratedDivs”的类（如果您需要它的话）。然后使用javascript

选择所有内容

var filteredResults=document.querySelectorAll(".myGeneratedDivs").filter(function(elem){
    ....
    return true;
});

或使用jQuery / Zepto / YourWeaponOfChoice

var filteredResults=$(".myGeneratedDivs").filter(function(index){
    var elem=this;
    ....
    return true;
});

Answer 5

如果您打算使用jQuery，可以使用以下jQuery选择器

div[id^="a"]

或

$('div[id^="id"]').each(function(){
// your stuff here
});

Answer 6

您必须定位父 div，当有人点击父 div 内的子 div 时，您可以捕获子 div。

 <div id="target">
  <div id="tag1" >tag1</div>
  <div id="tag1" >tag2</div>
  <div id="tag1" >tag3</div>
 </div>

$("#target").on("click", "div", function() {
var showid = $(this).attr('id');
alert(showid)
});

Answer 7

getElementById（）将返回指定的确切元素。有许多javascript框架，包括jQuery，允许更强大的选择功能。例如：

按ID选择元素：$（“＃theId”）
按类选择一组元素：$（“。class”）
选择子元素：$（“ul a.action”）

针对您的具体问题，您可以轻松构建适当的选择器。

访问动态生成的div id

7 个答案: