いつもお世話になってます。早速ですが、質問です。ああああああああああああと自動的に吐き出される時、 divに【 class="hoge" id="hoge1" 】のように記述を追加したいのです。ああああああああああああただ、onloadイベントを使わずに上記を実行したいのですが、書き方が分かりません。 onloadを使わない書き方をご教授ください。よろしくお願いします。

onloadはソースをhtmlに埋め込まないための手段なので逆に考えればbodyタグの最後にソースを埋め込んでしまえばよいでしょう。ああああああああああああああああああ var tags=document.getElementsByTagName("div"); var count=0; for (var i=0;i

自働生成される<div>タグに連番を振りたい

解決済

質問者：uni0214
質問日時：2009/12/18 21:25
回答数：3件

いつもお世話になってます。
早速ですが、質問です。

<div class=hoge">あああ</div>
<div class=hoge">あああ</div>
<div class=hoge">あああ</div>
<div class=hoge">あああ</div>

と自動的に吐き出される時、
divに【 class="hoge" id="hoge1" 】のように記述を追加したいのです。

<div class=hoge" id="hoge1">あああ</div>
<div class=hoge" id="hoge2">あああ</div>
<div class=hoge" id="hoge3">あああ</div>
<div class=hoge" id="hoge4">あああ</div>

ただ、onloadイベントを使わずに上記を実行したいのですが、
書き方が分かりません。
onloadを使わない書き方をご教授ください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： mtaka2
回答日時：2009/12/19 20:19

JavaScriptライブラリの jQuery を使ってもいいなら、以下の一行でidの付加が実現できます。

$("div.hoge").each(function(index, elem) { $(elem).attr("id", "hoge"+(index+1));});

このままだと、div ができあがってから、このスクリプトを実行する必要がありますが、

$(document).ready(function(){
$("div.hoge").each(function(index, elem) {$(elem).attr("id", "hoge"+(index+1)); });
});
とすれば、この記述をどこで行っても
「ファイル読み込み完了後、onload が実行される前」のタイミングで上述のid付加処理が実行されるようにできます。

jQueryについては以下のページが入門として参考になるでしょうか。
http://allabout.co.jp/internet/javascript/closeu …

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

ライブラリを使った方法は自分も考えていたので大変参考になりました。
ありがとうございました！！

通報する

お礼日時：2009/12/21 14:18

No.3

回答者： yambejp
回答日時：2009/12/21 09:55

onloadはソースをhtmlに埋め込まないための手段なので

逆に考えればbodyタグの最後にソースを埋め込んでしまえばよいでしょう。

<html>
<body>
<div class="hoge">あああ</div>
<div>あああ</div>
<div class="hoge">あああ</div>
<div class="hoge">あああ</div>
<div>あああ</div>
<div class="hoge">あああ</div>
<script>
var tags=document.getElementsByTagName("div");
var count=0;
for (var i=0;i<tags.length;i++){
if(tags[i].className=="hoge") tags[i].id="hoge"+(++count).toString();
}
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！！

> onloadはソースをhtmlに埋め込まないための手段
自分はJavaScriptに関してあまり明るくないので参考になりました。
ありがとうございました！！

通報する

お礼日時：2009/12/21 14:20

No.1

回答者： kura07
回答日時：2009/12/19 01:28

onloadを使わないのなら、document.write()でするのがベストだと思います。

この関数は、引数で指定した文字列をタグとみなして出力します。
挿入したい部分にjavascriptを直接書くか、外部ファイル化で入れてください。

＜外部ファイルで挿入＞
～～～～～html側～～～～～
<body>
...
<script type="text/javascript" src="hoge.js"></script>
...
</body>

～～～～～hoge.js側～～～～～
for(var i=1;i<=4;i++){
document.write('<div class="hoge" id="hoge'+i+'">あああ</div>');
}

＜直接挿入＞
～～～～～html側～～～～～
<body>
...
<script type="text/javascript"">
for(var i=1;i<=4;i++){
document.write('<div class="hoge" id="hoge'+i+'">あああ</div>');
}
</script>
...
</body>