jQueryで複数の要素オブジェクトを取得したあと

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()」を使う方法はありますでしょうか？あるのなら具体的に教えてください。

よろしくお願いします。

No.1 回答者： Taiyonoshizuku 回答日時： 2014/10/22 17:28

eachとか使わないの？

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

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

この回答への補足

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

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

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

補足日時：2014/10/22 19:14

この回答へのお礼

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

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

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

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

No.2 回答者： Taiyonoshizuku 回答日時： 2014/10/22 21:44

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

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

この回答への補足

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

補足日時：2014/10/24 12:14

この回答へのお礼

ありがとうございました

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

No.3 回答者： b0a0a 回答日時： 2014/10/23 07:21

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

var $ = document.querySelectorAll.bind(document)

この回答へのお礼

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

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

No.4 ベストアンサー 回答者： DoubtOwl 回答日時： 2014/10/23 10:59

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

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


for(var i =0; i < $("[name=nn]").length; i++){
　　alert( $("[name=nn]").eq(i).val() );
}

この回答へのお礼

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

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