- ベストアンサー
自動生成される<div>タグに連番を振りたい
- divタグに連番を付ける方法を知りたいです。
- onloadイベントを使用せずにdivタグに連番を付ける方法を教えてください。
- 自動生成されるdivタグに連番を追加したいですが、onloadを使用せずに実現する方法がわかりません。
- uni0214
- お礼率78% (11/14)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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を振ると言う事ばかり考えてました。 脳ミソ固まってましたｗ ありがとうございました！！
関連するQ&A
- livedoorblogの最新記事に連番でID
<IndexArticlesLoop>内のものが繰り返し表示されますが、 その中の<div class="article-header">に対して 以下のように自動でIDが割り振られるようにしたいのですが、 そのような動作を実行できるjavascriptなどはないでしょうか。 よろしくお願いします ※livedoor blog proを利用しておりますのでFTP機能も利用できます。 1つ目の記事 … <div class="article-header" id="hoge1"> 2つ目の記事 … <div class="article-header" id="hoge2"> 3つ目の記事 … <div class="article-header" id="hoge3">
- ベストアンサー
- JavaScript
- jqueryにて、独自属性を使ってタグを操作したい
皆様 いつもお世話になります。 早速ですがご質問させていただきます。 現在、独自属性を使った学習をしております。 jqueryでidを使って以下のタグの「追加位置」に「追加要素」を挿入すると 以下のようになると思いますが、 <div id="aaa"> <!--追加位置--> </div> $(div#aaa).prepend("追加要素"); 独自属性を使って、同じことをしようとする際、idを識別するのに「#」を使うと思いますが、独自属性はどういう識別子（★にあたる箇所）を使うのでしょうか？ div data-hoge="aaa"> <!--追加要素--> </div> var dokuji = $('div').attr('data-hoge'); $(★dokuji).prepend("追加要素"); お詳しい方ご教授のほど宜しくお願い致します。 開発環境： Dreamweaver CC Firefox 34.0.5
- ベストアンサー
- JavaScript
- スタイルシートで特定IDかつ特定クラスの要素のスタイルを設定するには？
<div id="hoge" class="piyo">～</div> 上記のように特定IDかつ特定クラスの要素にのみスタイルを適用させるには CSSにどのように記述すればよいでしょうか？ div#hoge.piyo、div.piyo#hogeいずれも試してみましたがうまく動きませんでした。
- 締切済み
- HTML
- CSSで、DIV#hogeという記述は何の意味を表しますか？
CSSファイルで、 DIV#hoge { xxxxxxxxxxx; } と書かれているものがありますが、この「DIV#」とは何でしょうか？ YahooでもGoogleでも「DIV#」とか「DIV#とは」とかで検索するのですが、珍しくヒットしません・・・・ 普通なら、 div idをつくりたいならば、#hogeと書きますし、div classをつくりたいならば .hogeと書くと思いますが、DIV#hogeというのは何のことでしょうか？
- ベストアンサー
- HTML
- Event.observeで、入れ子divタグでのmouseoutイベントについて
box1の中にbox2、box2の中にbox3と入れ子になったDIVタグがあります。 box1の外側へカーソルが外れた際にイベント発生させたくて以下のような コードを用意しましたが、box1の内側へカーソルを移動し、box2へカーソルが重なった時にもイベントが発生してしまいます。 box1の外側に外れたときだけイベントが発生するようにしたいのですが、どのように記述したらよいのでしょうか？ また、入れ子になったbox2、3でイベントが発生しないよう、イベントを発生させたいオブジェクトとイベントが発生したオブジェクトを比較していますが、もっとスマートな方法はあるのでしょうか？ ご助力お願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>mouseout</title> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function () { Event.observe( $("box1"), "mouseout",out,true ); } function out(event) { var p = Event.findElement(event,'div.parent'); var e = Event.element(event); if(p!=e) return; $("tt").innerHTML = e.id+"からmouseout<br />"+$("tt").innerHTML; Event.stop(e) } // --></script> <style> #box1{ background: #ccc; padding: 10px; } #box2{ background: #ddd; padding: 10px; } #box3{ background: #eee; padding: 10px; } </style> </head> <body> <h1>mouseout</h1> <div id="box1" class="parent">ボックス1 <div id="box2">ボックス2 <div id="box3">ボックス3</div> </div> </div> </div> </body> <div id="tt"></div> </html>
- 締切済み
- JavaScript
- div内の classのリンクのつけ方
<body class="thrColFixHdr"> <div id="header"> <div id="headerIn"> <div class="logo">店名</div> <h1>ようこそ</h1> </div> <!-- end #header --></div> ホームページの一番上の部分です。 http://www.goo.ne.jp/ 上記サイトのように左上にロゴが入っており、 お店ページのロゴをクリックしたら、上記ページと同じようにトップページに戻るようにしたいのですが、 class="logo"にリンクをつけても反応してくれません。 それ以外にググって色々調べましたが、どうしても方法が分りません。 初歩的な質問かもしれず、恐縮ですがご教授いただければ幸いです。
- 締切済み
- ホームページ作成ソフト
- Jquery html()を使って空のdivを挿入したい
お世話になります。 コーディングの際、「div」がひとつ多いために大幅にレイアウトが崩れてしまいました。しかし、事情があってHTMLをいじることができません。 そこで無理やりなのですが Jqueryのhtml()を使って<div class="test">と、追加してやることにしました。 <script> $(function(){ $("#article_btm").html('<div class="test">'); }); </script> <div id="article_btm"></div> </div><!--これがひとつ多いdiv--> 思惑では <div id="article_btm"><div class="test"></div> </div><!--これがひとつ多いdiv--> と、なるかと思ったんですが、プレビューすると <div id="article_btm"><div class="test"/></div> </div><!--これがひとつ多いまま--> となって、結局</div>がひとつ多いままなんです。 他にもtext()でもためしてみたんですが、結果は同じでした。 どなたかよい方法をご存じの方は教えてください！！
- ベストアンサー
- JavaScript
- JavascriptでDIV～DIVをリロードで
はじめまして質問いたします。 JavaScriptにて<div id="test">～</div>の間をリロード毎に変更させたいのです。 <div id="test"> <h2>リーロード毎に変更</h2> <div id="contents"> <img src="../images/test.jpg"> <p>テスト要素です</p> </div> </div> 上記の<div id="test">～</div>の中身をページを開いたり、リロードする度に変更させたいのですが、 Javascriptを使用して自動でできるようにしたいのですが、どうかご教授ください。 よろしくお願いします。
- 締切済み
- JavaScript
- CSSでDIV IDをつかった行間設定
css div#hoge { line-height: 200%; } hoge.html <body> <div id="hoge"> あいうえお<BR> かきくけこ<BR> </div> </body> 上記にてやってみると行間が２００％になってくれません。行間を２００％にするにはどうすればいいですか。 おしえてください ぐー！
- ベストアンサー
- HTML
- phpで文字列に入ったhtmlタグの中身を取得
phpで次の文字列の中身を自分の思ったように取得したいです。 -----$textの中身 <div class="hoge">ほげほげ1<div class="piyo">ぴよぴよ</div>ほげほげ2</div> -----自分の実行したphpコード preg_match_all("/<div class=\"hoge\">(.*?)<\/div>/s", $text, $textArr); -----結果($textArr[0]) ほげほげ1<div class="piyo">ぴよぴよ -----自分の望む結果($textArr[0]) ほげほげ1<div class="piyo">ぴよぴよ</div>ほげほげ2 ---------------------------------- divタグの中にdivタグが入っている時、 最初の/divに反応してしまいます。ちゃんと、ほげほげ2まで取得する方法を教えてください。
- 締切済み
- PHP
お礼
回答ありがとうございます！ ライブラリを使った方法は自分も考えていたので大変参考になりました。 ありがとうございました！！