- ベストアンサー
自動生成される<div>タグに連番を振りたい
- divタグに連番を付ける方法を知りたいです。
- onloadイベントを使用せずにdivタグに連番を付ける方法を教えてください。
- 自動生成されるdivタグに連番を追加したいですが、onloadを使用せずに実現する方法がわかりません。
- uni0214
- お礼率78% (11/14)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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/closeup/CU20071020A/
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
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>
お礼
回答ありがとうございます！！ > onloadはソースをhtmlに埋め込まないための手段 自分はJavaScriptに関してあまり明るくないので参考になりました。 ありがとうございました！！
- kura07
- ベストアンサー率50% (30/59)
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>
お礼
回答ありがとうございました！！ document.writeの発想はありませんでした。。。 <div class=hoge">を検索してidを振ると言う事ばかり考えてました。 脳ミソ固まってましたｗ ありがとうございました！！
お礼
回答ありがとうございます！ ライブラリを使った方法は自分も考えていたので大変参考になりました。 ありがとうございました！！