質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

609閲覧

jQueryを利用しての別要素の値取得

Program_

総合スコア11

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/16 02:35

編集2020/03/16 03:58

前提・実現したいこと

別要素(TEXTBOX)内の値を取得したい
http://commonsense-design.com/web/jquery-get-element/#index3-3
上記サイトなどを参考に下記ソースを作成しました。

テキストボックスが2つ並んでおり、1個目・2個目の値を取得し後の処理で利用したいです。
取得タイミングはテキストボックスをクリックした時点ですが、$(this).val()でクリックした側のテキストボックスの値は取得出来ております。
問題はもう一個のテキストボックス(クリックしていない側)の値が取得できず、undefinedが返るという点です。

該当のソースコード

jQuery

1$(window).ready(function(){ 2 var stday = new Date('2999/12/31'); 3 var edday = new Date('2999/12/31'); 4 var daydiff = '0'; 5 6 var valText = $('#my-form [name=count]').val(); 7 var val = Number(valText) || 0; 8 9 $('.datepick').change(function(){ 10  alert($(this).val());              //1個目のTEXTBOXの値を取得 11  alert($(this).siblings('.datepick').val());  //2個目のTEXTBOXの値を取得 12 }); 13});

HTML

1<div class="area_plan"> 2 <TR> 3  <TH>工期</TH> 4  <TD> 5   <INPUT TYPE=TEXT class="datepick" ID="KOUKI_S<%=i%>" NAME="KOUKI_S<%=i%>" VALUE="<%=KOUKI_S(i)%>"> 6  </TD> 7  <TD> 8   <INPUT TYPE=TEXT class="datepick" ID="KOUKI_E<%=i%>" NAME="KOUKI_E<%=i%>" VALUE="<%=KOUKI_E(i)%>"> 9  </TD> 10 </TR> 11</div>

試したこと

1:$(this).siblings('.datepick').val();
2:$(this).closest('.area_plan').find('.datepick').index(this)  
3:その他上述のサイト記載【.prev()】や【.next()】など

その他補足

実際は3種類の組み合わせを複数回ループしており、下記の様にIDとNAME部分の末1文字の数値を変数にて取得しております。
そのため、IDやNAMEではなくClass名で取得しようと考えておりますが出来ない状況です。

[1セット目]
<ID=KOUKI_S1 NAME=KOUKI_S1><ID=KOUKI_E1 NAME=KOUKI_E1>
<ID=ZIKAN_S1 NAME=ZIKAN_S1><ID=ZIKAN_E1 NAME=ZIKAN_E1>
<ID=HIYOU_S1 NAME=HIYOU_S1><ID=HIYOU_E1 NAME=HIYOU_E1>
[2セット目]
<ID=KOUKI_S2 NAME=KOUKI_S2><ID=KOUKI_E2 NAME=KOUKI_E2>
<ID=ZIKAN_S2 NAME=ZIKAN_S2><ID=ZIKAN_E2 NAME=ZIKAN_E2>
<ID=HIYOU_S2 NAME=HIYOU_S2><ID=HIYOU_E2 NAME=HIYOU_E2>


ご助力のほどお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Tableでないのに、TR、TH、TD なのは違和感がありますが、それはスルーするとして、

INPUT は TD の子要素なので、各INPUTの関係は兄弟ではなく、いとこ(親の兄弟の子供)ですね。

簡単な方法は、HTMLのTDタグを削除して INPUT が兄弟関係になるように変更することですね。そうすれば現状のJSを変更する必要はないです。


HTMLを変更しないなら、

js

1 $('.datepick').change(function(){ 2  alert($(this).val());             //変更したTEXTBOXの値を取得 3  alert($('.datepick').not($(this)).val());  //他方のTEXTBOXの値を取得 4 });

投稿2020/03/16 04:30

編集2020/03/16 04:42
hatena19

総合スコア33782

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Program_

2020/03/16 06:52

出来ました出来ました出来ました!!! 一部記述を抜粋したためTABLEになりますが、記載を忘れておりました。今後気を付けます。 兄弟要素の認識に誤りがあり、そちらもご指摘頂きありがとうございます。
guest

0

ひとつ上の親の自分以外のHTML要素が兄弟です

投稿2020/03/16 02:36

yambejp

総合スコア114968

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問