PHP経由で動的に生成されるdiv IDがいくつかあります
<div id='a<?php echo $gid?>>
JavaScript でそれらにアクセスするにはどうすればよいですか? これらの div はすべて「A」で始まり、その後に数字が続きます。
なんらかの検索機能はありますか
getElementById(a*)?
助けてくれてありがとう
PHP経由で動的に生成されるdiv IDがいくつかあります
<div id='a<?php echo $gid?>>
JavaScript でそれらにアクセスするにはどうすればよいですか? これらの div はすべて「A」で始まり、その後に数字が続きます。
なんらかの検索機能はありますか
getElementById(a*)?
助けてくれてありがとう
No generic JavaScript function for this (at least not something cross browser), but you can use the .getElementsByTagName
and iterate the result:
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!
}
}
This is the most low level you can get so you won't have to worry about old browsers, new browsers or future browsers.
To wrap this into a neater function, you can have:
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;
}
The usage example would be:
window.onload = function() {
var arrDivs = GetElementsStartingWith("div", "a");
for (var i = 0; i < arrDivs.length; i++) {
arrDivs[i].style.backgroundColor = "red";
}
};
In case you choose to use jQuery at some point (not worth for this thing alone) all the above code turns to single line:
$(document).ready(function() {
$('div[id^="a"]').css("background-color", "blue");
});
さて、なぜランダムなIDを持つ要素を選択/取得する必要があるのか疑問に思います。ランダムなIDを持つすべてのdivで何かをしたいと思います(それらの配置やサイズ変更など)。その場合->要素にランダム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;
});
jQueryを使用する場合は、次のjQueryセレクターを使用できます。
div[id^="a"]
また
$('div[id^="id"]').each(function(){
// your stuff here
});
いいえ、機能するには固定の ID 値が必要ですgetElementById
。ただし、要素を DOM で検索する方法は他にもあります (たとえば、CSS クラスによる)。
querySelectorAll
で始まる ID を持つすべての div を取得するために使用できますa
。次に、それぞれに番号が含まれているかどうかを確認します。
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
}
}
getElementById() は、指定された正確な要素を返します。はるかに強力な選択機能を可能にするjQueryを含む多くの JavaScript フレームワークがあります。例えば:
特定の問題に対して、適切なセレクターを簡単に作成できます。