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

質問

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<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.4

DoubtOwl · ベストアンサー

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らしい記述に書き換えることができました。
質問をしてみてよかったです。ありがとうございました

回答No.3

b0a0a

そもそも要素を取得するのにjQueryを使わなければいいのでは？
var $ = document.querySelectorAll.bind(document)

お礼

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

回答No.2

Taiyonoshizuku

いっぺんに処理するところ以外は
$("[name=nn]")で取るんじゃなくって
単体で取るのが一番じゃない？

お礼

ありがとうございました

補足

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

回答No.1

Taiyonoshizuku

eachとか使わないの？
いちいちオブジェクトの件数調べたりする必要ないけど。

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

お礼

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

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

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

補足

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

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

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