- ベストアンサー
初心者のためのJavaScriptのdiv idの表示方法
- 初心者の方に向けて、JavaScriptを使用してdiv idの中身を取り出して表示する方法について解説します。
- JavaScriptの関数を使ってdiv idを読み込んで配列に保存し、日付順に並び替えます。
- 配列の要素を順番に取り出して、それぞれのdivの中身を表示しますが、表示される行が1行しかありません。
- future-boy
- お礼率54% (50/92)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
やりたいことは、divのidに日付が入っており、 そのid情報を元にdivをソートし再出力したい でよろしいですか？ <html> <head> <script type="text/javascript"> function yomikomi(){ var div = document.getElementsByTagName("div"); var list = document.getElementById("list"); var kids = []; for(var i=0; i<div.length; i+=1){ if(div[i].id && div[i].id.match(/\d+/)){ kids.push(div[i]); } } kids.sort(function(n, m) { if (n.id === m.id) return 0; return (n.id < m.id) ? -1 : 1; }); for(var i=0; i<kids.length; i+=1){ list.appendChild(kids[i]); } } </script> </head> <body onload="yomikomi();"> <div id="list"> <div id="201008012">ID201008012</div> <div id="201007161">ID201007161</div> <div id="201008013">ID201008013</div> <div id="201008015">ID201008015</div> <div id="201006015">ID201006019</div> </div> </body> </html>
その他の回答 (5)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞undefined」という文字だけ連続して表示されています。 失礼しました。演算子の優先順位をミスったみたい。 if(e = document.getElementById(parents[i]) && parents[i] != 'ID_') ↓ if((e = document.getElementById(parents[i])) && parents[i] != 'ID_') にすれば、動作すると思います。 （No4様：フォローありがとうございます。） でも、やりたいことに関しては、どうやらNo5様の推理があたっているみたいなので、最初にidの配列を定義しておくよりも、No5様のようにドキュメントから該当する要素を拾い出すようにしておいたほうがなにかと便利なはずと思われます。 ということで、もし利用なさるならそちらをどうぞ。
お礼
なんどもご回答頂きありがとうございます。 とても参考になりました。 天才ですね。
- yyr446
- ベストアンサー率65% (870/1330)
No.2さんのだと、eにtrue/falseが入っている。 素直に for(i=0; i<parents.length; i++) { if(document.getElementById(parents[i]) && parents[i] != 'ID_') html += document.getElementById(parents[i]).innerHTML + "<br>"; } でうまくいく。 ※HTML文法の間違いは、ブラウザーが何とかしてくれる。
- yyr446
- ベストアンサー率65% (870/1330)
HTML（）のエレメントのid属性は、数字で始められません。 HTML4.01で仕様確認 http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
- fujillin
- ベストアンサー率61% (1594/2576)
HTMLが不明なので、想像するしかないのだけれど… （スクリプトの目的もよくわかりませんけれど） document.writeを使っていることから、body内にスクリプトがあるのだと思いますが、document.getElementById(parents[i])で取得しようとしている要素のDOMは生成された後でしょうか？（生成されていないと取得できずエラーになる） あるいは、ロード後にスクリプトが実行されているのなら、document.writeで新たな文書が作成されるので現在のDOMが参照できなくなっているとか… ＞//★問題の箇所 画面には１行しか表示されない。 「1行」の意味が不明ですが、配列は全て書き出されるが1行になってしまうと言う意味なのか、配列要素が1個分しか表示されないという意味なのか… 前者ならば、出力したHTMLに改行がないから。 もっとも、HTMLで改行しても表示には反映されないので、<br>や<p>要素を記述してあげる必要があります。 後者であれば↑のエラーで処理が止まっている可能性が考えられます。 また、配列を削除するにはspliceだけでよいですが、i=0から増加順に行なうとミスが起こる可能性があります。 （例の場合だと「ID_」が最後になるので、問題はありませんが…） i = parents.length-1から減少順に処理するか、または、増順におこなうなら削除せずに処理をスキップするだけにするかにしたほうがよさそう。 さらには ＞selectObj[i] = document.getElementById(parents[i]); で定義した内容に対して ＞document.write(selectObj[i].innerHTML); を出力しようとしても、selectObj[i].innerHTMLの値は未定義のはず。 内容がよくわかってませんけれど、以下みたいにしたらどうなりますか？ <script type="text/javascript"> <!-- window.onload = yomikomi; function yomikomi(){ var parents = ['ID_', '201008012', '201007161']; var e, html = ""; //日付順にする parents.sort(); //html作成 for(i=0; i<parents.length; i++) { if(e = document.getElementById(parents[i]) && parents[i] != 'ID_') html += e.innerHTML + "<br>"; } //★表示 document.write(html); } //--> </script> * ところで、idって数字から始まってもよかったんだっけ？
補足
早速のご返答ありがとうございます。 HTMLについては下の回答への補足で付け足しました。 スクリプトの目的とは・・・ これはIDに日付を付けて、perlでファイル出力したものを並び替えしたい事です。 一応複数表示できましたが、「undefined」という文字だけ連続して表示されています。 これをIDの中身にするにはどうのようにすれば良いのでしょうか？ 大変恐縮なんですがもしも宜しければ教えて下さい。 javascriptは難しい。。。
- zeff
- ベストアンサー率69% (137/198)
document.writeが実行された時点で HTML文書が書き換えられてしまっているので、 ２回目以降の関数が実行されていない（関数自体が消えてしまった） んだと思いますけど。 スクリプトが置いてある場所と、 HTMLがどうなっているのか（現象を再現可能な文書を）書き添えたら、 誰か親切な人が直してくれますので、 この回答の補足欄使ってください。
補足
ありがとうございます。 そうですね、私の説明不足です。 //▼追記したもの <body onload="yomikomi()";> <script type="text/javascript"> function yomikomi(){ var selectObj = new Array(); var parents = new Array(); //配列を読み込む parents=Item(); //日付順にする alert(parents); parents.sort(); alert(parents); //return parents; for(i=0; i < parents.length; i++){ //ID_ だけ削除する。 if(parents[i]=='ID_'){ delete parents[i]; parents.splice([i],1); } selectObj[i] = document.getElementById(parents[i]); //小窓で確認 alert(selectObj[i].innerHTML); //★問題の箇所 画面には１行しか表示されない。 document.write(selectObj[i].innerHTML); } } </script> <script type="text/javascript"> function Item(){ var parents = Array( 'ID_' ,'201008012' ,'201007161' ); return parents; } </script> //▼追記したもの <div id="201008012"> ID </div> <div id="201007161"> ID </div> </body>
お礼
参考させてもらいました。 結果やりたいことができました。 すごく助かりました。 ありがとうございました。