配列の取得がうまくいかない

Question

ajaxで受け取ってきた配列の分、inputを作って値を送信したいと思っています。

下記のspecResultには
21,果汁(オレンジ)
22,果実(オレンジ)
23,ビタミンC
24,果糖ブドウ糖
のように配列がはいっています。

var specResult = data.specResult;

	  	$.each(specResult,function(id,specResult){

	  		if(specResult!=""){
		  		$(".spec").css("display","block");
		  		$(".spec").append($("<label>"+specResult[1]+"<input type='checkbox' class='spec' name='spec_data[]' value='"+specResult[0]+"/"+specResult[1]+"'></label>"));
		  		
	  		}
	  	});

上記のようinputをcheckboxでformを送信した場合、php側では下記の通りうけとれます。

[
	(int) 0 => '21/果汁(オレンジ)',
	(int) 1 => '22/果実(オレンジ)',
	(int) 2 => '23/ビタミンC',
	(int) 3 => '24/果糖ブドウ糖'
]

ですが、textにかえると下記のように複数になってしまいます。

[
	(int) 0 => '21/果汁(オレンジ)',
	(int) 1 => '22/果実(オレンジ)',
	(int) 2 => '23/ビタミンC',
	(int) 3 => '24/果糖ブドウ糖',
	(int) 4 => '24/果糖ブドウ糖',
	(int) 5 => '23/ビタミンC',
	(int) 6 => '24/果糖ブドウ糖',
	(int) 7 => '24/果糖ブドウ糖',
	(int) 8 => '22/果実(オレンジ)',
	(int) 9 => '23/ビタミンC',
	(int) 10 => '24/果糖ブドウ糖',
	(int) 11 => '24/果糖ブドウ糖',
	(int) 12 => '23/ビタミンC',
	(int) 13 => '24/果糖ブドウ糖',
	(int) 14 => '24/果糖ブドウ糖'
]

checkboxとtextでなぜこのようにかわるのでしょうか？
初歩的なことなのかとおもうのですが、よろしくお願いいたします。

Answer 1

追加した要素にも class='spec' があるので、2回目以降の処理がおかしくなりませんか？

Answer 2

#訂正
元回答は意味がないので訂正します
append先のタグまで指定（$("div.spec")のような感じに）すればよいでしょう

$(function(){
  var specResult=[
    [21,"果汁(オレンジ)"],
    [22,"果実(オレンジ)"],
    [23,"ビタミンC"],
    [24,"果糖ブドウ糖"],
    ];
  $.each(specResult,function(id,specResult){
    if(specResult!=""){
      $(".spec").css("display","block");
      $("div.spec").append($("<label>"+specResult[1]+"<input type='text' class='spec' name='spec_data[]' value='"+specResult[0]+"/"+specResult[1]+"'></label>"));
    }
  });
});

<form>
<input type="submit" value="go">
<div class="spec"></div>
</form>
<?PHP
print_r($_GET);
?>

Comments

[yambejp]

訂正します
HTMLの文章構造確認しました
inputタグのなかに更にlabelでかこったinputが包含されていますね

スクリプトの書き方がちがうようなのでちょっと書き直します

[yambejp]

inputにspecクラスがついているからでした
inputのspecクラスを外すか、append先のタグを指定するなどで対応可能です

[tarao]

回答ありがとうございます！
思い通りに取得できました！

これは$("div.spec")の部分を$(".spec")にしていたため、inputのクラス名とかぶってしまっていたことが原因だったということであっていますか？

[yambejp]

そういう認識であっています。
元ソースをブラウザのF12開発環境でみるとinputが子ノードを
持たされていることが確認できます。
そもそもinputタグは子要素をもたないという先入観があったので
見落としがちですよね。
実際inputタグのなかのinputタグ自体画面表示されないので
気がつきづらいところです

[tarao]

checkboxだと取得できるのになんでだろうって思っているばかりで、教えてもらうまで気付くことができませんでした。
ありがとうございました！
また質問させていただくことがあると思いますが、よろしくお願いいたします。。。