• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：初心者です。）

初心者のためのJavaScriptのdiv idの表示方法

nekomikekamoの回答

  • ベストアンサー
回答No.5

やりたいことは、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>

future-boy
質問者

お礼

参考させてもらいました。 結果やりたいことができました。 すごく助かりました。 ありがとうございました。

この回答がついた質問に戻る
回答 全件
#2です。 ＞undefined」という文字だけ連続して表示されてい…
No.2さんのだと、eにtrue/falseが入っている。 素直に f…
HTML（）のエレメントのid属性は、数字で始められません。 　HTM…
HTMLが不明なので、想像するしかないのだけれど… （スクリプトの目的…
document.writeが実行された時点で HTML文書が書き換え…
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptのonsubmitについて

    大変申し訳ありませんが、とても困っているため書かせていただきました。 「次へ」「戻る」のボタンがある画面で、下記JavaScriptをかきました。 すると、アラートメッセージが表示されるとそれ以降の処理はまったく動かず ブラウザを再読み込みしない限り、次へなどのボタンがききません。 return falseをしているせいなのだと思いますが、回避策を教えていただけないでしょうか。 処理は、 <!-- script --> <script type="text/javascript" language="JavaScript"> <!-- document.getElementById("Form").onsubmit = function() { var errkey = document.getElementsByName('item3'); var keyArray = new Array(); for( i=0; i<19; i++ ) { if (errkey[i].checked){ keyArray.push(i); } } for( i=0; i<keyArray.length; i++ ) { ansnum = keyArray[i]; check1 = document.getElementsByName('item1'); check2 = document.getElementsByName('item2'); if (flgCheck1[ansnum].checked) continue; if (flgCheck2[ansnum].checked) continue; alert('同じ'); 　 return false; } } // --> </script>

  • JavaScriptのinnerHTMLの挙動について

    下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>

  • 【javascript　文法】値渡し？参照渡し？

    以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？　と混乱しています。 この辺のところを、教えてください。お願いいたします。

  • ソースが難しくて初心者にわかるようにどなたか教えて

    https://okwave.jp/qa/q9365480.html の続き 初心者なのでソースだけではわかりません。 もう少し具体的に何をやっているか教えていただければ幸いです。 ＞＞＞ functionaddCR( obj ){ id=obj.id; strArray[ id - 0 ]+='\r\n'; alert(obj.parentNode.outerHTML) obj.innerHTML+='<br>'; } 恐らくここで、テキストをクリックしたとき、クリックした場所で改行されるようですが、もう少し初心者にわかるように解説いただけませんか？ これは何を再代入しているのですか？ id=obj.id; 変数A += 変数Bは、変数A = 変数B+変数Aなので、 配列になにかしているのですか？ strArray[ id - 0 ]+='\r\n'; なぜこれでクリックしたところにbrがつくのでしょうか？ obj.innerHTML+='<br>'; https://codepen.io/anon/pen/xLWmZv ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>test</title> </head> <body> <textarea>ここに文章を入力してください</textarea> <button>表示</button> <button>出力</button> <textarea id="out" readonly></textarea> <div id="disp"></div> <script type="text/javascript"> varstrArray; functionaddCR( obj ){ id=obj.id; strArray[ id - 0 ]+='\r\n'; alert(obj.parentNode.outerHTML) obj.innerHTML+='<br>'; } functiondisp(){ var str=document.getElementsByTagName('textarea')[0].value; strArray=str.split(''); vardiv=document.getElementById('disp'); div.innerHTML=''; var aProto=document.createElement('a'); for( var i =0, len=strArray.length; i<len; i++ ){ vara=aProto.cloneNode(1); a.onclick=function(){ addCR(this); } a.innerText=strArray[ i ]; a.id=i div.appendChild(a); } } functionoutput(){ var outText=document.getElementsByTagName('textarea')[1]; outText.value=strArray.join("") } document.getElementsByTagName('Button')[0].onclick=function(){ disp() } document.getElementsByTagName('Button')[1].onclick=function(){ output() } </script> </body> </html>

  • 要素がひとつの配列は問題ありますか？

    DIVを全て非表示にし、display_listにあるものを表示させる事をしようとしています。 しかし、display_listに入れる配列の要素が一つしかないところでundefinedが出てしまい上手く行きません。 要素が一つの配列は問題ありますでしょうか？ どうすれば上手く行くようになりますでしょうか？ <html> <head> <script type="text/javascript"> var cat_list = ['media_type','print_type','option_opp','option_setup']; var display_list = new Array(); display_list['media_type'] = new Array(1,2); display_list['print_type'] = new Array(1,2); display_list['option_opp'] = new Array(1); display_list['option_setup'] = new Array(1); var item_list = new Array(); item_list['media_type'] = new Array('media_type_cd','media_type_dvd'); item_list['print_type'] = new Array('print_type_inc','print_type_thermo'); item_list['option_opp'] = new Array('option_opp'); item_list['option_setup'] = new Array('option_setup'); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready( function(){ for(var i=0; i<cat_list.length; i++){ //alert(cat_list[i]); for(var j=0; j<item_list[cat_list[i]].length; j++){ //alert(j); //alert(cat_list[i]); //alert(item_list[cat_list[i]][j]); $('#'+item_list[cat_list[i]][j]).hide(); } } for(var i=0; i<cat_list.length; i++){ //alert(cat_list[i]); for(var j=0; j<display_list[cat_list[i]].length; j++){ //alert(j); //alert(cat_list[i]); //alert(display_list[cat_list[i]][j]); //alert(item_list[cat_list[i]][display_list[cat_list[i]][j]-1]); $('#'+item_list[cat_list[i]][display_list[cat_list[i]][j]-1]).show(); } } }); </script> </head> <body> <div id="media_type_cd">media_type_cd</div> <div id="print_type_inc">print_type_inc</div> <div id="option_opp">option_opp</div> <div id="option_setup">option_setup</div> </body> </html>

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • for(var i=0;...) の i の値を保持するには？

    ----- <ul> <li>test1</li> <li>test2</li> <li>test3</li> </ul> <script type='text/javascript'> (function(){ var li = document.getElementsByTagName('li'); for(var i=0,max=li.length; i<max; i++){ li[i].onclick = function(){ alert(i); }; } })(); </script> ----- 上記スクリプトを実行すると、全てのli要素でクリックしたときに "3" がalertされます。 0,1,2 をそれぞれalertしたいのですが、どういった方法が考えられるでしょうか？ 現在作成しているスクリプトでは、下記のようにidに値を保持しています。 もう少しスマートな方法がある気がするのですが…。 --- li[i].id = 'test' + i; li[i].onclick = function(){ alert(this.id.replace(/^test(\d+)/, '$1')); }; ---

  • 1ページ内で複数のwindow.onload = functionの動作

    Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>

  • innerHTMLに代入したインラインフレームのＤＩＶの値の取得について

    下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>

  • GoogleMapでxmlから10件のみ情報取得

    今、googlemapで、xmlに書き出されたデータをjavascriptで呼び出し、地図外に一覧を表示させています。 現在のスクリプトでは、xmlデータ全件取得されています。 マップ上のポイントは前件表示、一覧表示部分のみ10件のみ表示に変更させる場合の書き方がわかりません。 初心者なりに、色々とやってみたのですが、うまくいかず。。。 ご指導いただけると助かります。 ****************************************** <script type="text/javascript"> var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById('map')); ・・・ } GDownloadUrl('http://○○.jp/map.xml', function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); var shopList = document.getElementById('map_text'); ・・・ for (var i = 0; i < markers.length; i++) { var shop = markers[i].getAttribute('shop'); var text = markers[i].getAttribute('text'); ・・・ var marker = createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl); var sidebarEntry = createSidebarEntry(marker,shop, text); map.addOverlay(marker); shopList.appendChild(sidebarEntry); } }); } function createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl) { ・・・ ｝ function createSidebarEntry(marker, shop, text) { var shopList = document.createElement('div'); shopList.id = "map_text"; var maplist =shop + '<br/>' + text;　　←※ここで呼び出される情報を10件に限定したい shopList.innerHTML = maplist; GEvent.addDomListener(shopList, 'click', function() { GEvent.trigger(marker, 'click'); }); return shopList; } </script> ******************************************

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する