jQueryで一番近くにある任意のクラスを取得したい

Question

`

<ul> <li><button class="button">ボタン</button></li> <li><button class="button">ボタン</button></li> <li><button class="button">ボタン</button></li> ・ ・ ・ <li><button class="button">ボタン</button></li> </ul> `

**以上のようなHTMLに対して押されたボタンのある<li>要素のみ色を変えるなどの処理を行いたいのですが、**どうしたらいいでしょうか。

Answer 1

parentメソッドを使うことで親要素のクラスのみを選択することができます。

たとえば、押されたボタンの<li>要素だけ背景を赤にする場合、
$(function(){ $('.button').click(function() { $(this).parent('li').css('background-color', 'red'); }); });
といったコードで実装可能です。

注意点は、parentメソッドは一つ上の階層の親要素しかとってこれないという点です。
何個上の階層の親要素か分からない場合などはclosestメソッドを使ってください。
使い方はparent要素と同様です。

その他、子要素、孫要素や兄弟要素の選択の方法は
以下のサイトに分かりやすく載っていますので参考にして下さい。

jQuery親要素、子要素、兄弟要素取得のまとめ
http://satussy.blogspot.jp/2011/05/jquery.html