個別IDの割付

質問

PHPスクリプトのブログなどで、
投稿される”記事”に<div id=***>と言うような各記事の個別のIDを割り振りたいのです。
ご教授お願い申し上げます。

内容としては・・
テンプレートに記事を埋め込む形なので、
<div id=hoge>記事1</div>
<div id=hoge>記事2</div>
<div id=hoge>記事3</div>
・・・
と言うのは簡単です。

ですが。。
<div id=hoge1>記事1</div>
<div id=hoge2>記事2</div>
<div id=hoge3>記事3</div>
・・・
記事に応じて順次1,2,3・・と言うように、
番号を振るものをイメージしております。

これが可能になると、各記事に個別のCSSを定義できるなど、
利便性が格段に増えるんじゃないか？と思っています。
よろしくお願い申し上げます。

回答No.3

noname#199778 · ベストアンサー

PHPスクリプトで吐き出されるHTMLソース自体を書き換えたいと言う場合でしたら、PHPスクリプト自体に手を加えて、idを連番をつけて吐き出させるような格好に整える方が、スマートなやり方になると思います。

ただ、JavaScriptでどうにかしたいと言う場合であれば、JavaScriptから書き出されている要素に対して一時的な変更を加え、連番を振り直してやることも可能です。
以下に、実際のJavaScriptを書きます。

<script type="text/javascript"><!--
function init(){
if (document.getElementsByTagName){
len=document.getElementsByTagName("div").length;
n=1; //←id名に追加する連番の初期値
for (i=0; i<len; i++){
if (document.getElementsByTagName("div")[i].getAttribute("id")=="hoge"){
document.getElementsByTagName("div")[i].setAttribute("id","hoge"+n);
n++;
}
}
}
}

window.onload=init;
//--></script>

上のソースをページ内に入れておくと、ページロードが終った時点でページ内の総てのdiv要素を取得し、各div要素がid=hogeというid属性を持っているかどうかをチェックして、hogeと言うid名が与えられているdiv要素だった場合には、そのdiv要素のid名をhoge1、hoge2、hoge3と、1から始まる連番を追加した名前に一時的に置き換えます。
DOMを利用しているので、DOMに対応していないブラウザでは動作しません。 上のソースは、windowsのIE6、Netscape7.1、Opera7.11で、動作を確認しています。

とりあえず、idの割り付けについてだけ、JavaScriptで対処する方法を想定してみました。 参考になれば。

お礼

すばらしい！
ありがとうございます！
思ったとおりの結果が得られました。
本当にありがとうございます。

回答No.2

ryou0607

同一IDを持ったオブジェクトがある場合、
hoge[0]
hoge[1]
hoge[2]
といったように取得することが可能です。
i=0;
while(document.getElementById("hoge["+i+"]")){
document.getElementById("hoge["+i+"]").class="hogehoge";
i++;
}
書き方（indexの指定の仕方）はちょっと違うかも知れないですが、色々試してみてください。document.forms[0].hoge[0]とか。

お礼

ご返答ありがとうございます！
完全に理解は出来ていませんが、雰囲気が分かってきました・・＾＾；
実は、分かったようなこと言ってますが、
私には、「取得」した後、「どぉやって吐き出す？」の最大の難関が残ってしまいます。（笑

hoge[0]
hoge[1]
hoge[2]
・・を何らかの形で反映させて、　←ココが知りたい。
最終的には＿
var hoge = document.getElementById("hoge[1]");
hoge .innerHTML = "ほげ1";
var hoge = document.getElementById("hoge[2]");
hoge .innerHTML = "ほげ2";
。。と言うような形にしたいのです。
引き続きご教授お願い申し上げます。

回答No.1

ryou0607

質問の焦点が不明瞭ですが、idを順番に振りながらオブジェクトを作成したいっていうことでしょうか。
それでしたら、
for(i=0;i<hogeSize;i++){
document.write("<div id=hoge"+i+">");
document.write(記事[i]);
document.write("</div>");
}
こんな感じでできます。
hogeSizeは、記事の数で良いと思います。

お礼

ご返事首を長くしてお待ち申し上げておりました。（笑）
ありがとうございます。

>質問の焦点が不明瞭・・
ごもっともな気がします。＾＾；
要らない言葉並べるより単刀直入に申し上げますと・・。

元々生成される
<div id=hoge>記事1</div>
<div id=hoge>記事2</div>
<div id=hoge>記事3</div>
・・・
を、
　　　↓
<div id=hoge1>記事1</div>
<div id=hoge2>記事2</div>
<div id=hoge3>記事3</div>
・・・
と言うように置換（になるのでしょうか）出来ないでしょうか？
と言うことなんです。
document.getElementById("hoge");
にしても最初の"hoge"だけみたいだし・・
「同一IDを捕らえておいて、順に"+i+"を付け加える」
と言った感じでしょうか。

補足

>document.getElementById("hoge");
>にしても最初の"hoge"だけみたいだし・・
>「同一IDを捕らえておいて、順に"+i+"を付け加える」
>と言った感じでしょうか。
・・の補足です。。

一つ目の"hoge"が掴めても、次の"hoge"に移るのは可能なのでしょうか..。
どぉすればいいのか皆目検討がつきません。