中小企業の働き方改革をサポート>>

jQueryで複数の要素オブジェクト(というの?)を取得するケースで、jQueryオブジェクトとして扱えなくなっていることが気持ち悪く、ここをどうにかできないかという話です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …

<input type="text" id="ii1" name="nn" value="マツコ">
<input type="text" id="ii2" name="nn" value="竹田">
<input type="text" id="ii3" name="nn" value="小梅太夫">

<script>
jQuery(function ($) {
  alert($("#ii1").val()); // (0)
  alert($("[name=nn]:eq(1)").val()); // (1)
  alert($("[name=nn]:first-child").val()); // (2)

  alert($("[name=nn]")[2].value); // (3)
  alert($("[name=nn]").get(1).value); // (4)
});
</script>

このソースで、(0)はいいとして、(1)(2)のようにオブジェクトが一つしか返らないような場合には、「.val()」メソッドが使えます。しかし(3)(4)の場合には、少なくともこのままでは「.val()」メソッドが使えないため、Elementオブジェクトのvalueプロパティを使用しています。

値を取得するコードで「.val()」「value」が混在しているのが気持ち悪く、「value」に統一したいです。ちなみに実際には「$("[name=nn]")」のように取得したあと、for文でまわして処理するケースが多いです。

「$("[name=nn]")」で取得し、オブジェクトの件数をカウントしたあと苦肉の策で、for文の中で「$("[name=nn]:eq(" + i + ")").val()」等と書いたこともありますが、むしろ読みにくくなってしまっています。これだったらまだvalueプロパティを使う方がいいかと思います。


「$("[name=nn]")」で複数のオブジェクトを取得した後で、それぞれのオブジェクトに「.val()」を使う方法はありますでしょうか?あるのなら具体的に教えてください。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

jqueryにもeq()はあるようですよ



alert($("[name=nn]").eq(2).val()); // (3)


for(var i =0; i < $("[name=nn]").length; i++){
  alert( $("[name=nn]").eq(i).val() );
}
    • good
    • 0
この回答へのお礼

これですね!
おかげさまで、スッキリ&jQueryらしい記述に書き換えることができました。
質問をしてみてよかったです。ありがとうございました

お礼日時:2014/10/24 13:46

そもそも要素を取得するのにjQueryを使わなければいいのでは?


var $ = document.querySelectorAll.bind(document)
    • good
    • 0
この回答へのお礼

jQueryの質問をしているのに、jQueryを使わなければいいとはなかなかアバンギャルドな回答ですね。
ありがとうございました

お礼日時:2014/10/24 12:16

いっぺんに処理するところ以外は


$("[name=nn]")で取るんじゃなくって
単体で取るのが一番じゃない?

この回答への補足

「いっぺんに処理するところ以外」というのがどういう状況なのかよく分かりませんが、配列の長さが変わる可能性があり、その最初の要素だけ飛ばして繰り返し同じ内容の処理をしたいというときには単体で取るというのは適さないと思います。配列の長さが変わるたびにコードを書き換えなければならなくなってしまうので、

補足日時:2014/10/24 12:14
    • good
    • 0
この回答へのお礼

ありがとうございました

お礼日時:2014/10/24 12:11

eachとか使わないの?


いちいちオブジェクトの件数調べたりする必要ないけど。

$('.hoge').each(function(index) {
alert(index+' = ' + $(this).val());
});
みたいな。

この回答への補足

質問文中に間違いがありました。
このスペースをお借りして訂正させていただきます。

# 値を取得するコードで「.val()」「value」が混在しているのが気持ち悪く、
# 「value」に統一したいです。
は間違いです。

# 「.val()」に統一したいです。
が正しいです。

補足日時:2014/10/22 19:14
    • good
    • 0
この回答へのお礼

なるほど。eachを使えばいいんですね。単純なループはこれでいけました。ソースも書き換えました。しかし、1行飛ばして開始するケースや複数のオブジェクトを同時に処理する場合(表形式で1行にテキストボックスが2つ、selectリストが1つとか)などやや複雑な場合には、あまり適さないように感じました。なので、そちらは今のところもとのコードのままにしています…。

jQueryは9/9にはじめたばかりでまだ一ヵ月半くらいしかやっていないことと、一人でやっているので「jQueryの普通」がまだ分からなかったりします。

ですので助かりました。ありがとうございました

お礼日時:2014/10/22 19:30

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

Qフォームで同じ複数のnameで違うvalueの送信

始めまして、現在一個のフォーム内で複数の同じnameで、違うvalueを送信しようと苦戦しております、、普通にタグを書くだけでは
一個のnameで違うvalueの送信は、最後のvalueしか送信できないです、
phpは使用できません。javaは、、殆ど素人なので、あまり分かりません、、formを一個一個区切るのも、レイアウト上できません、、
どうすればいいのでしょうか?・・・以下タグです。
昨日から、ここから先に進めません。。
先輩方助けてください、本当によろしくお願いします。

<form action="http://hoge.net/hoge/hogecheck.php" method="post">
<input type="hidden" name="site" value="hoge">
<input name="id" type="text" id="idform" maxlength="10" />

<input type="hidden" name="kin" value="3000">
<input type="image" src="buybtn.gif" />
<input type="hidden" name="kin" value="5000">
<input type="image" src="buybtn.gif" />
<input type="hidden" name="kin" value="10000">
<input type="image" src="buybtn.gif" />
<input type="hidden" name="kin" value="20000">
<input type="image" src="buybtn.gif" />

</form>

始めまして、現在一個のフォーム内で複数の同じnameで、違うvalueを送信しようと苦戦しております、、普通にタグを書くだけでは
一個のnameで違うvalueの送信は、最後のvalueしか送信できないです、
phpは使用できません。javaは、、殆ど素人なので、あまり分かりません、、formを一個一個区切るのも、レイアウト上できません、、
どうすればいいのでしょうか?・・・以下タグです。
昨日から、ここから先に進めません。。
先輩方助けてください、本当によろしくお願いします。

<form action="http://hoge...続きを読む

Aベストアンサー

No.2の回答者です。
スミマセンm(__)m、Javaでしたね。PHPで書いてしまいました。。。

Java だったらこれで取れます。(HTML側の修正は不要です。)
String[] kin= req.getParameterValues("kin");

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QJavaScriptにて動的に配列を作成して、POSTで渡したい

独学でJavaScriptの勉強をしているものです。
勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。

以下のようなフォームがあったとします。

<form name="testForm1">
<input type="hidden" name="id" value="1" />
<input type="checkbox" name="check" />
</form>

このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。

それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得して、別のページにPOSTで渡したいんです。

以下のようなスクリプトを書いたのですが、思うように動作してくれませんでした。

<form action="hoge" name="testForm2" method="post">
<input type="hidden" name="id" />
</form>

function func() {
var idArray = new Array();
for ( count = 0; count < document.testForm1.length; count++ ) {
if ( document.testForm1.check.checked == true ) {
idArray.push( document.testForm.id.value );
}
}
document.testForm2.id.value=idArray;
document.testForm2.submit();
}

JavaScriptに関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。

独学でJavaScriptの勉強をしているものです。
勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。

以下のようなフォームがあったとします。

<form name="testForm1">
<input type="hidden" name="id" value="1" />
<input type="checkbox" name="check" />
</form>

このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。

それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得し...続きを読む

Aベストアンサー

<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">


var a = document.getElementsByTagName( 'fuga' );
var c , o, b = [ ];

for( c = 0; o = a[ c++ ]; ) if( a.checked ) b.push( a.value );
document.getElementById( 'yyyy' ).value = b.join(',');
とか。

QJQueryでfunctionに引数としてIDを渡して処理する方法

HTMLの制御にjQueryを使用しています。
functionに引数としてIDを渡して処理をしたいのですが、やりかたが分かりません。
テスト的にtest1Script、test2Scriptを作成しました。
test1と同様の結果を、引数にIDを渡すtest2Scriptでも得たいのですが、
失敗(1)や失敗(2)のように書いた場合、うまくいきません。何か良い方法はないでしょうか。ご教授下さい。

<script type="text/javascript">
function test1Script(){
alert($("#textfield1").val());
}
function test2Script(objId){
//alert($("#objId").val()); 失敗(1)
//alert($(#objId).val()); 失敗(2)
}
</script>
</head>
<body>
<input type="text" id="textfield1" value="test1" />
<input type="button" id="button1" value="テスト1" onclick="test1Script();" />
<input type="button" id="button2" value="テスト2" onclick="test2Script('textfield1');" />
</body>
</html>

HTMLの制御にjQueryを使用しています。
functionに引数としてIDを渡して処理をしたいのですが、やりかたが分かりません。
テスト的にtest1Script、test2Scriptを作成しました。
test1と同様の結果を、引数にIDを渡すtest2Scriptでも得たいのですが、
失敗(1)や失敗(2)のように書いた場合、うまくいきません。何か良い方法はないでしょうか。ご教授下さい。

<script type="text/javascript">
function test1Script(){
alert($("#textfield1").val());
}
function test2Script(objId){
//alert($("#...続きを読む

Aベストアンサー

回答1
function test2Script(objId){
alert($(objId).val());
}

<input type="button" id="button2" value="テスト2" onclick="test2Script('#textfield1');" />

回答2
function test2Script(objId){
alert($("#" + objId).val());
}

<input type="button" id="button2" value="テスト2" onclick="test2Script('textfield1');" />

QリンクでPOSTデータを送信することは可能ですか?

はじめまして。
Submitボタンを使用せずに<A>リンクでFORMのPOSTメソッドデータを送信することは可能でしょうか?
やはりURLにデータを付加して送信するしかないのでしょうか?
ご教授よろしくお願い致します。

Aベストアンサー

javascript を使えば可能です。大雑把にはこんな感じ。

・パラメータが全部 hidden な form を記述しておく(ブラウザでは表示されない)
・<a href> では、その form を submit するように javascript を記述する

試してないですけど、こんな感じ。

<form name=f method=POST action="http://どこか">
<input type=hidden name=x1 value=v1>
</form>

<a href="javascript:document.f.submit()">リンクから submit</a>

QInner join と Left joinの明確な違いは?

Inner join と Left joinの違いがよくわかりません。
教えてください。

Aベストアンサー

出てくる結果が違います。

テーブル1のフィールド1に、






が、

テーブル2のフィールド1に、






が入力されている場合、

SELECT [テーブル1].[フィールド1], [テーブル2].[フィールド1]
FROM テーブル1 LEFT JOIN テーブル2 ON [テーブル1].[フィールド1]=[テーブル2].[フィールド1];
では、結果は、
テーブル1.フィールド1 テーブル2.フィールド1
1               1
2               2
3               3
4               NULL
5               NULL
6               NULL
の6レコードが出力されますが、

SELECT [テーブル1].[フィールド1], [テーブル2].[フィールド1]
FROM テーブル1 INNER JOIN テーブル2 ON [テーブル1].[フィールド1]=[テーブル2].[フィールド1];
では、結果は、
テーブル1.フィールド1 テーブル2.フィールド1
1               1
2               2
3               3
の3レコードしか出力されません。

出てくる結果が違います。

テーブル1のフィールド1に、






が、

テーブル2のフィールド1に、






が入力されている場合、

SELECT [テーブル1].[フィールド1], [テーブル2].[フィールド1]
FROM テーブル1 LEFT JOIN テーブル2 ON [テーブル1].[フィールド1]=[テーブル2].[フィールド1];
では、結果は、
テーブル1.フィールド1 テーブル2.フィールド1
1               1
2               2
3           ...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qhtmlのfileタグに自動で値を入れる方法

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉の策になっています…。

とりあえず(だめだとは思っていたのですが)
<input type="file" value="ファイルパス" name="filepath">
と直書きにしてみたり
document.all.filepath.value = "ファイルパス";
などとしてみたりしましたがだめでした…。
W3C勧告の使用上はvalueでファイルパスを指定できるようになっているようなのですが、現在の一般的なブラウザでは禁止されているようですね。

このような場合、何らかの方法でfileにファイルパスを自動入力することはできますでしょうか?
もしできない場合、何らかの方法で実現する方法はありますでしょうか?よろしくお願いします。

ちなみに実現できればいい環境は
WinXP環境のIE6です。言語はクライアント言語はJavaScriptのみで、という条件付です。
できないかもしれないのですが、こういうのって必要になるときもあるよなーなどと思っており、もしかしたら解決方法があるかもしれないと思い質問しました。よろしくお願いします。

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉...続きを読む

Aベストアンサー

やっぱ無理じゃないでしょうか。
なにか裏ワザ的な方法で一時的にできたとしても、いつか直されるかもしれないのでおいそれとは使えないし。

>W3C勧告の使用上はvalueでファイルパスを指定できるようになっている
→参考URL 「ユーザが明示的に送信を求めたファイル以外のものは送ってはいけない」とあります。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#forms-security


人気Q&Aランキング

おすすめ情報