子要素の値を上手く取得できない

Question

前提・実現したいこと

登録ボタンをクリックした際に、「条件１、条件２、論理条件（AND,OR,NOT）を取得したいと思っています。
試したソースコードでは上手く取得できずこちらに質問させていただきました。

該当のソースコード

<div id="keyword">
	<div class="Field01">
      <div style="display:none;">
        <select name="cond1">
          <option value="0">AND</option>
          <option value="1">OR</option>
          <option value="2">NOT</option>
        </select>
      </div>
	  <p>条件１</p>
	  <div>
	    <select name="cond2" class="inputT01">
	      <option value="0">aaa</option>
	      <option value="1">bbb</option>
	      <option value="2">ccc</option>
        </select>
      </div>
	  <p>条件２</p>
      <div>
        <input type="text" name="cond3" placeholder="keyword">
      </div>
	</div>
	<div class="Field01">
	  <div>
	  <select name="cond1">
	    <option value="0">AND</option>
	    <option value="1">OR</option>
	    <option value="2">NOT</option>
	  </select>
	  </div>
	  <p>条件１</p>
	  <div>
	  <select name="cond2" class="inputT01">
	    <option value="0">aaa</option>
	    <option value="1">bbb</option>
	    <option value="2">ccc</option>
	  </select>
	  </div>
	  <p>条件２</p>
	  <div>
	  <input type="text" name="cond3" placeholder="keyword">
	  </div>
	</div>
	<div class="Field01">
	  <div>
	  <select name="cond1" class="inputT01">
	  <option value="0">AND</option>
	  <option value="1">OR</option>
	  <option value="2">NOT</option>
	  </select>
	  </div>
	  <p>条件１</p>
	  <div>
	  <select name="cond2" class="inputT01">
	  <option value="0">aaa</option>
	  <option value="1">bbb</option>
	  <option value="2">ccc</option>
	  </select>
	  </div>
	  <p>条件２</p>
	  <div>
	  <input type="text" name="cond3" placeholder="keyword">
	  </div>
	</div>
</div>
<input type="button" name="regist" id="regist" value="登録">

試したソースコード

$(function() {

  $("#regist").click(function(e) {  
   var result = [];
   $('#keyword').find('div.Field01').each(function(index, condition) {
     result.push({
      c1 : $(this).children('div:eq(0)').children(':input:visible').children(':selected').val(),
      c2 : $(this).children('div:eq(1)').children(':input').children(':selected').val(),
      c3 : $(this).children('div:eq(2)').children(':input').val()
     });
   });
  });

});

問題点

試したソースコードで、論理条件のみは取得できているのですが
条件１、条件２のデータを、３つとも「undefined」となっており指定の仕方が間違っていると思われます。

お手数をお掛けしますが、ご確認よろしくお願いします。

Comments

[yambejp]

なにがどうヒットして想定ではどうなっているはずなのでしょう？

[maystorm]

取得する値としては、下記のような値の取得を想定しています。

result = [
{ c1: undefined, c2: 1 , c3: '入力した文字列' },
{ c1: 2, c2: 2 , c3: '入力した文字列' },
{ c1: 0, c2: 0, c3: '入力した文字列' }
];

こちらで回答になっていますでしょうか。

[yambejp]

命題と想定値が違います
最初のC1はundefinedだとして、c2も2個目(実質3個目)のdivにあるinputは
input要素だから:selectedされるものはありません
ちゃんとご自身のソースをよく推敲してみて下さい

[maystorm]

ご指摘ありがとうございます。
.Field01クラス内の、div指定順番が違っていました。
'div:eq(2)'
'div:eq(4)'
を修正。

.Field01内に、pタグ要素もあるのでそちらもカウントしておりました。
色々ご指摘頂きありがとうございました。

Answer 1

:input:visible の意図がわからないのですが、やりたいのは次のようなことでしょうか?

     result.push({
      c1 : $(this).find('*[name="cond1"]').val(),
      c2 : $(this).find('*[name="cond2"]').val(),
      c3 : $(this).find('*[name="cond3"]').val()
     });

Comments

[maystorm]

ご確認ありがとうございます。

<div id="keyword">内の
各<div class="Field01">に設定されている順に、子要素の値を取得したいと思っております。
・論理条件
・条件１
・条件２

result = [
{ c1: '', c2: '' , c3: '' },
{ c1: '', c2: '' , c3: '' },
{ c1: '', c2: '' , c3: '' }
];

記載頂いたコードですと、c1,c2,c3がすべてundefinedとなっておりました。
result = [
c1: undefined
c2: undefined
c3: undefined
];

[int32_t]

「子要素の値」というのは select と select と input の値、という解釈であってますか?
提示されているHTMLとJavaScriptのコードで、pushの部分だけ私の回答のように変更すれば undefined にはならないはずです。

[maystorm]

こちらの方法でも実装できるか、試してみたいと思います。
ご指摘頂きありがとうございました。

Answer 2

とりあえずpushでobjectを設定するならセパレータは「;」ではなく「,」
それと提示されている条件でヒットするものがないからundefinedなのだと思います

Comments

[maystorm]

構文エラーのご指摘ありがとうございます。
コードを修正しました。

[yambejp]

結局なにをどうヒットさせたいのですか？

$(this).children('div:eq(0)').children(':input:visible').children(':selected').val()

.Field01の0個目のdiv のinput要素(select含む)がvisibleなものでその子がselectedされてる？
input要素が:selectedされているのでは？

[maystorm]

>$(this).children('div:eq(0)').children(':input:visible').children(':selected').val()

上記要素だけ、一番最初の.Field01を表示した際は、<select name="cond1">が非表示となっているため、
':input:visible'を利用しました。

ソースコードでは、.keyword内の.Field01は3つで記載していますが、実際は.Field01クラス数は可変となります。
.Field01内の要素は、表示順番は同じなのでchildren('div:eq(0)')で順番を指定して、論理条件部分の値を取得しています。

>$(this).children('div:eq(0)').children(':input:visible').children(':selected').val()　→　

>.Field01の0個目のdiv のinput要素(select含む)がvisibleなものでその子がselectedされてる？

と同じ認識と思います。

$(this).children('div:eq(2)').children(':input').children(':selected').val(),
.Field01内の2個目のdivで、select要素の値を取得

$(this).children('div:eq(4)').children(':input').val()
.Field01内の3個目のdivで、input要素の値を取得

を想定しています。

[yambejp]

＞ .Field01内の2個目のdiv

eq(2)は0から始まる2個目なので、実質3個目ということは理解できていますか？
eq(4)はどうカウントしても3個目のdivとは解釈できません

[yambejp]

とりあえずこう

$(function() {
$("#regist").on('click',function(e) {
var result =$('#keyword .Field01').map(function(){
return {
c1:$(this).find('div:eq(0) :input:visible').val(),
c2:$(this).find('div:eq(1) :input').val(),
c3:$(this).find('div:eq(2) :input').val(),
}
}).get();
console.log(result);
});
});