jQueryで一番近いセレクタや、親要素を指定する（closest, parent, children）

あるセレクタに「一番近い」要素の指定の仕方

jQueryで、直接的にリーチが難しいタグについて、「何かの一番近く」や「何かの親要素」という指定の仕方をしたい時があります。

例えば、私の場合は、ファイルを読み込むための input type="file" タグのスタイルを変更したくて、この要素を style="display:none;" 指定して、その「一番近くの」 <lavel> タグに色々とstyleを追加したことがあります。

もちろん <lavel> タグにidなどを振ってもいいのですが、複数ある場合などに煩雑になるのでつけたくなかったので、 $('input[type="file"]') の近く、で指定しました。やり方は以下。

$('input[type="file"]').closest('lavel')

このように、 closest() の引数に、色々とセレクタを入れてあげることができるみたいなんですよね。

あるセレクタの親要素の指定の仕方

これもメソッドさえ知ってしまえば言わずもがななのですが、

$(セレクタ).parent()

と指定すれば良いようです。

あるセレクタの子要素の指定の仕方

親と反対ですね。

$(セレクタ).children('セレクタ')

これで、「あるセレクタの直下にある何か」をかなり自由に指定することができます。特に、複数あるものについて、 $(this).children('option[value="' + 変数名 + '"]').prop() などと指定することで、「今操作しているもの」の子要素であるオプションだけに操作させるといったことが可能になります。

良く使うので、サクサク使いこなしていきたいメソッドだと思いました。

以上です。