jQueryの構文なのですが「length」と「toString」の意味って似ていますが違うものですか?

このQ&Aのポイント
  • jQueryを使用してデータの表示と操作を行う際、lengthとtoStringという2つのメソッドがあります。
  • lengthは配列やオブジェクトの要素の数を返すメソッドで、データの長さを取得するのに使用します。
  • 一方、toStringはオブジェクトを文字列に変換するメソッドで、データを文字列として表示するのに使用されます。
回答を見る
  • ベストアンサー

length toString

jQueryの構文なのですが for(var i = 0; i < data.lodging_reservations.length; i++){ //var deadline = data[0].deadline; //var status = data[0].lodging_reservations[0].status; var tdTag1 = $('<td>') .attr('id','date' + i.toString()) .text(data.lodging_reservations[i].date); var tdTag2 = $('<td>') .attr('id','status' + i.toString()) .text(data.lodging_reservations[i].status); var trTag = $('<tr>'); trTag.append(tdTag1,tdTag2); $('tbody').append(trTag); } 「length」と「toString」の意味って似ていますが違うものですか?

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5078/13270)
回答No.1

length はその名の通り長さを得るためのモノで、文字列なら文字数、配列なら配列の個数が入っているプロパティです。 toString は数値など文字列型以外の型の値を、文字列として取得するためのメソッドです。 なので「length」と「toString」は全く違うモノです。

関連するQ&A

  • 動的なcheckboxのcheckedについて

    動的にcgiから名簿tableを作り先頭にcheckboxを配置しています。 (□、コード、氏名) そのコードNo.取得し内容によってループ内でcheckboxをif文でオンオフしたいのですがコードNo.(rec[0])の取得方法がわかりません。できるはずとは思うのですが私の力不足で・・・。よろしくお願いします。 var recs = xhrObj.responseText.split("<r>"); var status2 = "<table id='meibo' ><tbody><tr>" +"<th width='20'><th width='40'>No.</th><th width='120'>氏名</th>" +"</tr>"; for(var i = 1; i < recs.length - 1; i++){ rec = recs[i].split("<i>"); status2 += "<tr><td><input type='checkbox' name='checkbox' id='"+i+"' /></td>"; status2 += "<td id='"+i+"' />"+rec[0]+"</td><td id='"+i+"' />"+rec[1]+"</td>"; status2 += "</tr>"; } status2 += "</tbody></table>"; document.getElementById("status2").innerHTML = status2; var observer = document.getElementById("meibo"); setListener(observer, "click", check);

  • js 検索

    php javascript 以下ソースコードです。j MitubisiLodgingReservationApp.prototype.canReserve = function(lodging_reservation, setting){ var reserveFlag = false; var offset = setting.deadline_day_offset; var time = setting.deadline_time; var reserve_date = lodging_reservation.reserve_date; var deadline = moment(reserve_date + ' ' + time).subtract(offset,'days'); var now = moment(); if(now.isBefore(deadline) ){ return true; } return false; }; 3行目の「 setting.deadline_day_offset; 」なのですがソースコードを追う際、フォルダ内全検索で 「 setting 」と検索を掛けても多すぎて追いきれないというのがあるのですが この場合「var setting 」や「function setting 」などで検索を掛けて絞り込む必要があると思いますが それで検索を掛けても見つからない場合、PHPで変数や関数を定義しているという事もありますか? またどのような検索を掛けた方が効率が良くなると思いますか?

  • jquery input 要素取得

    失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できません ソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>

  • jqueryでクイズを作成

    jqueryでクイズを作っているのですが、下のプログラムのような問題を書く部分(問題1、問題2...)のところに改行などを用いた長い文章を書きたいのですがどのようにしたらよいでしょうか? // answers の先頭が正答になるようにして下さい。選択肢はシャッフルして表示されます。 var questions = [ {'question': '問題1', 'answers': ['富士山', '愛鷹山', '天保山', '八ヶ岳']}, {'question': '問題2', 'answers': ['バラ', 'チューリップ', 'タンポポ', '百合']}, {'question': '問題3', 'answers': ['あららぎ', 'せんじょうがはら', 'せんごく', 'かんばる']}, {'question': '問題4', 'answers': ['宇宙人', '異世界人', 'ドイツ人', '未来人']} ]; Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; }; var answers = []; var current_question_number; $.each(questions, function (i, question) { question.true_answer = question.answers[0]; question.answers.shuffle(); }); $(function() { showQuestion(0); $('#answer_button').click(function () { var answer = -1; $.each($('#answers input'), function (i, value) { if ($(value).is(':checked')) { answer = i; return false; } }); if (answer == -1) { $('#warning').slideDown(); return false; } $('#warning').slideUp(); answers[current_question_number] = questions[current_question_number].answers[answer]; if (current_question_number < questions.length - 1) { showQuestion(current_question_number + 1); } else { showResult(); } }); }); function showQuestion(question_number) { current_question_number = question_number; var question = questions[question_number]; $('#question_number').text((question_number + 1) + "/" + questions.length); $('#question_body').text(question.question); $('#answers').empty(); $.each(question.answers, function (i, value) { $('#answers').append($('<li/>').append($('<input type="radio" name="answer" id="answer' + i + '"/>')).append($('<label for="answer' + i + '"/>').text(value))); }); } function showResult() { $('#question_view').hide(); $.each(questions, function (i, question) { var is_true = answers[i] === question.true_answer; $('#results').append($('<tr/>') .addClass(is_true ? 'true' : 'false') .append($('<th/>').text(i + 1)) .append($('<td/>').text(answers[i])) .append($('<td/>').text(question.true_answer)) .append($('<td/>').text(is_true ? '○' : '×')) ); }); $('#result_view').show(); }

  • チェックボックスの中味を送信できません

    昨日、Ajax通信で受け取ったデータをチェックボックスに反映する方法を教わった者です。 今度は送信で悩んでいます。 表のデータをPOSTで送るんですが、テキストのところ(「td」に書かれたものや input type="text" の部分) は問題なく渡せました。 でもまたまたチェックボックスでつまずいています。 ★☆★☆★☆★☆の部分ですが、プログラムは通るのですが、チェックボックスの内容(チェックか否か)を 拾ってくれません。 また、rows[i].getElementByTagName("sendF[]") などとやってみたんですが、エラー(not a function)が出てしまいます。 どなたかご指導下さい。 よろしくお願いします。 $.ajax({ type: "POST", url: "../SendList.php", data: {"condition":condition}, // Webサーバに送信するデータ dataType: 'text', // Webサーバか受信するデータの形式 success: function(request){ // ajax通信が成功したときの処理 var json = JSON.parse(request); var res = ''; for (var i = 0; i < json.length; i++){ res += '<tr>' + '<td style="text-align: center;">' + json[i].personId + '</td>' + '<td style="text-align: center;">' + json[i].personName + '</td>' + '<td style="text-align: center;">'; // 値を checkbox のチェックに差し込む if(json[i].sendF == 1){ res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF[]" checked />'; } else { res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF[]" />'; } res += '</td >' + '<td style="text-align: left;">' + '<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />' + '</td >' + '</tr>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<table id="tbl_correspondUpdate" class="customerlist"><tr><th>担当者ID</th><th>担当者名</th><th>送信F</th><th>メモ</th></tr>' + res + '</table>' + '<br />' +'<p class="condition_submit">' + '<input id="btnUpdate" type="button" onclick="doActionUpdate();" value="更新" />' + '</p>'; }, error: function(msg){ // ajax通信が失敗したときの処理 alert( "Data Saved: " + msg ); } }); } // 「更新」ボタンクリック function doActionUpdate(){ var tbl = document.getElementById("tbl_correspondUpdate"); var cols = tbl.rows[0].cells.length;// 列数 //var rows = tbl.rows.length; // 行数 var rows = tbl.rows; // 行に対するループ for (var i=1; i<rows.length; i++) { var sendF; if(rows[i].cells[6].checked){ ★☆★☆★☆★☆// → 通るものの拾わない //var elm = rows[i].getElementByTagName("sendF[]"); // → not a function //if(elm.checked){ sendF = 1; }else{ sendF = 0; } // dataセット var data = "personId=" + rows[i].cells[0].innerHTML + "&sendF=" + sendF + "&memo=" + rows[i].cells[3].firstChild.value updateRecord(data); } } // 更新処理 function updateRecord(data){ // 更新Ajax処理 // 更新したIDを返す $.ajax({ type: "POST",

  • pushをすると行ができる

    下のような繰り返し文を作ったのですが、 unshiftのところをpushにするとなぜか 1行空いて保存されます。 unshiftだと大丈夫です。 書き込むときに 行があく理由と行があったら行を取るような 方法があったら教えてください。 改行を取る処理で行は削除されると思ったのですが。 foreach (@txt) { $data = $_; $data =~ s/\r//; $data =~ s/\n//; ($id, $tonum, $c_date, $c_status, $chkbox) = split(/,/, $data); if($tonum eq $mynum) { $html .= "<tr><td>$tonum</td><td>$c_date</td><td>$c_status</td><td>$chkbox</td></tr>"; if ( $rec_id < $id ) { $rec_id = $id; } $rec_id++; } } $newmsg = join(',', ($rec_id, $mynum, $date, $status,0)); unshift (@txt, $newmsg); ちなみに$rec_idは一行ごとに一意(ユニーク) のidをつけようとしているのですが、idのつけ方で 効率的な方法があったらご教授ください。

    • ベストアンサー
    • Perl
  • localStorageでのcheckbox制御

    下記サイトを参考に、テキストボックスとチェックボックスをlocalStorageに保存するプログラムを作ってみました。 http://jsdo.it/twi_masa/hx8D 質問ですが、チェックやテキストを書いて保存ボタンを押すとlocalStorageに値が保存されることはchromeのデベロッパーツールで確認しました。 値がある状態でロードを押すとその保存された状態に復元されますが、それをロードボタンを押さずにページが読み込まれた直後に表示させる方法が知りたいです。 window.onload = function(){ 処理 } だと思い、 load : functionをwindow.onload = functionへ単純に変更しましたが、それでは保存もロード出来なくなってしまいました。 自分では全く書けないので、出来ましたらソースを書いていただけるとありがたいです。 よろしくお願いします。 <table> <tr> <td>テキスト</td> <td><input type="text" id="text1" /></td> </tr> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <input type="button" value="ロード" onclick="hx8D.load();" /> <script> var hx8D = function(){ var HX8D = function(){}; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; } } }, load : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ elements[i].value = localStorage[key]; }else if(type == "checkbox"){ elements[i].checked = localStorage[key] == "true" ? true : false; } } }, }; return new HX8D(); }(); </script>

  • 順番にセルの背景色をつけたい

    javascriptを使って セルの背景色一定の時間で順番に変える方法を調べています。 ボタンをクリックすると □□□□ ↓ ■□□□ ↓ □■□□ ↓ □□■□ ↓ □□□■ と変化するようなものを作成したいと考えております。 下記のソースでalertを出すと実現できるのですが、 alertをコメントアウトするとうまくいきません。 以上の点、アドバイス等お願いします。 <html> <head> <title></title> <script type="text/javascript"> function changeColor(){ var targetTable = document.getElementById('colorchange'); var targetTr = targetTable.rows[0]; var tdLen = targetTr.cells.length; for(var i = 0 ; i < tdLen ; i++ ){ if( i==0 ){ targetTr.cells[0].style.backgroundColor='red'; }else{ targetTr.cells[i-1].style.backgroundColor='white'; targetTr.cells[i].style.backgroundColor='red'; } wait( 300 ); //このalertを消すとうまくいかない alert('test'); } } function wait( timeWait ) { var timeStart = new Date().getTime(); var timeNow = new Date().getTime(); while( timeNow < (timeStart + timeWait ) ) { timeNow = new Date().getTime(); } } </script> </head> <body> <table border="1" id="colorchange"> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> </table> <button onClick="changeColor()">スタート</button> </body> </html>

  • 追加したテキストボックスとテキストエリアの数の制御

    下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか? あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか? <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>

  • Formのシリアライズができない

    新米プログラマーです。 JavascriptとJavaでショッピング画面を作っています。 以下のコードで function doActionShoppingEntry(){ で登録用のフォームを表示して、 function doActionShoppingAdd(){ Ajax通信で登録処理を行っています。 var data = $('#fmShoppingDetail').serialize(); でフォームの内容をシリアライズしようと しているのですが、うまくシリアライズされず data は空っぽのままです。 読み込む順番とか、スコープの問題かな、とも思ったんですけど、 var data_shoppingDate = $('#shoppingDate').val(); や var data_hinme = $('#hinmei').val(); は認識されて、空欄チェックをちゃんとしてくれます。 いろいろやってみたのですが、シリアライズされない状況が続いています。 どなたかヒントを頂くなりお願いできますでしょうか。 よろしくお願いします。 // ■お買物登録 // 登録画面表示 function doActionShoppingEntry(){ var space = ""; space += '<form id="fmShoppingDetail">' + '<tr>' + '<th>購入日</th>' + '<td><input type="text" id="shoppingDate" /></td>' + '</tr>' + '<tr>' + '<th>場所</th>' + '<td><input type="text" id="place" /></td>' + '</tr>' + '<tr>' + '<th>品名</th>' + '<td><input type="text" id="hinmei" /></td>' + '</tr>' + '<tr>' + '<th>金額</th>' + '<td><input type="text" id="kingaku" /></td>' + '</tr>' + '<input type="button" onclick="doActionShoppingAdd();" value="登録" />' + '<input type="hidden" id="customerId" value="' + $('#customerId') + '" />' + '</form>'; var obj = document.getElementById("datatableShoppingAdd"); obj.innerHTML = space; // お買上日 $(function(){ $('#shoppingDate').datepicker(); $("#shoppingDate").datepicker("option", "dateFormat", "yy/mm/dd"); } ); } // 登録 function doActionShoppingAdd(){ // 必須項目の入力チェック var data_shoppingDate = $('#shoppingDate').val(); if(data_shoppingDate == ""){ window.alert('購入日は空白では登録できません。'); return false; }else{ var data_hinme = $('#hinmei').val(); if(data_hinme == ""){ window.alert('品名は空白では登録できません。'); return false; } } if(window.confirm("登録していいですか?")){ var data = $('#fmShoppingDetail').serialize();                ←ここです。 $('#gon').text("登録内容は" + data); //gon内のテキストに表示 console.log("data[0]==========" + data[0]); $.post('/shoppingadd',data,function(resp, status, XHR){ if(status == "success"){ $('div#status').text("登録しました。"); } }); }else{ return false; } }

専門家に質問してみよう